React是React庫(kù)的入口點(diǎn)。如果您從<script>標(biāo)記加載React ，則這些頂級(jí)API可在React全局中使用。如果你使用npm的ES6，你可以寫import React from 'react'。如果你使用npm的ES5，你可以寫var React = require('react')。

概觀

組件

React組件讓你可以將UI分成獨(dú)立的，可重用的部分，并且可以獨(dú)立思考每個(gè)部分。React組件可以通過子類化React.Component或React.PureComponent。

• React.Component

• React.PureComponent

如果您不使用ES6類，則可以使用create-react-class模塊。有關(guān)更多信息，請(qǐng)參閱使用不帶ES6的React。

創(chuàng)建React元素

我們建議使用JSX來描述你的UI應(yīng)該是什么樣子。每個(gè)JSX元素都只是調(diào)用的語(yǔ)法糖React.createElement()。如果您使用JSX，通常不會(huì)直接調(diào)用以下方法。

• createElement()

• createFactory()

有關(guān)更多信息，請(qǐng)參閱使用不帶JSX的React。

轉(zhuǎn)換元素

React 還提供了其他一些API：

• cloneElement()

• isValidElement()

• React.Children

參考

React.Component

React.Component是React組件在使用ES6類定義時(shí)的基類：

class Greeting extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}

請(qǐng)參閱React.Component API參考以獲取與基React.Component類相關(guān)的方法和屬性列表。

React.PureComponent

React.PureComponent是完全一樣的React.Component，但實(shí)現(xiàn)shouldComponentUpdate()了一個(gè)淺的道具和狀態(tài)比較。

如果您的React組件的render()函數(shù)在給定相同的道具和狀態(tài)的React.PureComponent情況下呈現(xiàn)相同的結(jié)果，則可以在某些情況下用于提高性能。

需要注意   React.PureComponent的shouldComponentUpdate()只有淺淺的對(duì)象進(jìn)行比較。如果這些包含復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，則可能會(huì)對(duì)更深的差異產(chǎn)生假陰性結(jié)果。只有PureComponent在您期望擁有簡(jiǎn)單的道具和狀態(tài)時(shí)才會(huì)擴(kuò)展，或者forceUpdate()在知道深層數(shù)據(jù)結(jié)構(gòu)發(fā)生變化時(shí)使用?；蛘撸紤]使用不可變對(duì)象以便快速比較嵌套數(shù)據(jù)。此外，React.PureComponent的shouldComponentUpdate()跳過整個(gè)組件樹道具更新。確保所有兒童組件都是“純”的。

createElement()

React.createElement(
  type,  [props],  [...children])

創(chuàng)建并返回給定類型的新React元素。type參數(shù)可以是標(biāo)記名稱字符串（如'div'或'span'），也可以是React組件類型（類或函數(shù)）。

用JSX編寫的代碼將被轉(zhuǎn)換為使用React.createElement()。React.createElement()如果您使用JSX，通常不會(huì)直接調(diào)用。請(qǐng)參閱無(wú)JSX的React以了解更多信息。

cloneElement()

React.cloneElement(
  element,  [props],  [...children])

以克隆和返回一個(gè)新的React元素element為起點(diǎn)。由此產(chǎn)生的元素將具有原始元素的道具，新道具融合得很淺。新的孩子將取代現(xiàn)有的孩子。key并ref從原始元素中保存下來。

React.cloneElement() 幾乎相當(dāng)于：

<element.type {...element.props} {...props}>{children}</element.type>

但是，它也保留了refs。這意味著如果你得到一個(gè)帶著ref它的孩子，你不會(huì)意外地從你的祖先那里偷走它。您將獲得與ref新元素相同的附加信息。

此API是作為已棄用的替代品而引入的React.addons.cloneWithProps()。

createFactory()

React.createFactory(type)

返回一個(gè)生成給定類型的React元素的函數(shù)。類似的React.createElement()，類型參數(shù)可以是標(biāo)簽名稱字符串（如'div'或'span'），也可以是React組件類型（類或函數(shù)）。

這個(gè)幫助程序被認(rèn)為是遺留的，我們鼓勵(lì)您使用JSX或React.createElement()直接使用。

React.createFactory()如果您使用JSX，通常不會(huì)直接調(diào)用。請(qǐng)參閱無(wú)JSX的React以了解更多信息。

isValidElement()

React.isValidElement(object)

驗(yàn)證對(duì)象是一個(gè)React元素。返回true或false。

React.Children

React.Children提供用于處理this.props.children不透明數(shù)據(jù)結(jié)構(gòu)的實(shí)用程序。

React.Children.map

React.Children.map(children, function[(thisArg)])

上調(diào)用包含在每一個(gè)直系子的功能children與this設(shè)置為thisArg。如果children是鍵控片段或數(shù)組，它將被遍歷：該函數(shù)永遠(yuǎn)不會(huì)傳遞容器對(duì)象。如果孩子null或undefined返回null或undefined而不是一個(gè)數(shù)組。

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

像React.Children.map()但不返回?cái)?shù)組。

React.Children.count

React.Children.count(children)

返回組件的總數(shù)children，等于回調(diào)傳遞給map或forEach將被調(diào)用的次數(shù)。

React.Children.only

React.Children.only(children)

驗(yàn)證children只有一個(gè)子（一個(gè)React元素）并返回它。否則，此方法拋出。

注意：   React.Children.only()不接受返回值，React.Children.map()因?yàn)樗且粋€(gè)數(shù)組而不是React元素。

React.Children.toArray

React.Children.toArray(children)

children以分配給每個(gè)子項(xiàng)的鍵的平面數(shù)組形式返回不透明的數(shù)據(jù)結(jié)構(gòu)。如果你想在你的渲染方法中操作子集合，這很有用，特別是如果你想在重新排序或切片this.props.children之前將其傳遞下來。

注意：   React.Children.toArray()在展平子列表時(shí)，更改鍵以保留嵌套數(shù)組的語(yǔ)義。也就是說，toArray為返回?cái)?shù)組中的每個(gè)鍵添加前綴，以便將每個(gè)元素的鍵范圍限定為包含它的輸入數(shù)組。