組件 API

ReactComponent

React 組件實(shí)例在渲染的時(shí)候創(chuàng)建。這些實(shí)例在接下來(lái)的渲染中被重復(fù)使用，可以在組件方法中通過(guò) this 訪問(wèn)。唯一一種在 React 之外獲取 React 組件實(shí)例句柄的方式就是保存 React.render 的返回值。在其它組件內(nèi)，可以使用 refs 得到相同的結(jié)果。

setState

setState(object nextState[, function callback])

合并 nextState 和當(dāng)前 state。這是在事件處理函數(shù)中和請(qǐng)求回調(diào)函數(shù)中觸發(fā) UI 更新的主要方法。另外，也支持可選的回調(diào)函數(shù)，該函數(shù)在 setState 執(zhí)行完畢并且組件重新渲染完成之后調(diào)用。

注意：

絕對(duì)不要直接改變 this.state，因?yàn)樵谥笳{(diào)用 setState() 可能會(huì)替換掉你做的更改。把 this.state 當(dāng)做不可變的。

setState() 不會(huì)立刻改變 this.state，而是創(chuàng)建一個(gè)即將處理的 state 轉(zhuǎn)變。在調(diào)用該方法之后獲取this.state 的值可能會(huì)得到現(xiàn)有的值，而不是最新設(shè)置的值。

不保證 setState() 調(diào)用的同步性，為了提升性能，可能會(huì)批量執(zhí)行 state 轉(zhuǎn)變和 DOM 渲染。

setState() 將總是觸發(fā)一次重繪，除非在 shouldComponentUpdate() 中實(shí)現(xiàn)了條件渲染邏輯。如果使用可變的對(duì)象，但是又不能在 shouldComponentUpdate() 中實(shí)現(xiàn)這種邏輯，僅在新 state 和之前的 state 存在差異的時(shí)候調(diào)用 setState() 可以避免不必要的重新渲染。

replaceState

replaceState(object nextState[, function callback])

類似于 setState()，但是刪除之前所有已存在的 state 鍵，這些鍵都不在 nextState 中。

forceUpdate()

forceUpdate([function callback])

如果 render() 方法從 this.props 或者 this.state 之外的地方讀取數(shù)據(jù)，你需要通過(guò)調(diào)用 forceUpdate() 告訴 React 什么時(shí)候需要再次運(yùn)行 render()。如果直接改變了 this.state，也需要調(diào)用 forceUpdate()。

調(diào)用 forceUpdate() 將會(huì)導(dǎo)致 render() 方法在相應(yīng)的組件上被調(diào)用，并且子級(jí)組件也會(huì)調(diào)用自己的 render()，但是如果標(biāo)記改變了，那么 React 僅會(huì)更新 DOM。

通常情況下，應(yīng)該盡量避免所有使用 forceUpdate() 的情況，在 render() 中僅從 this.props 和 this.state 中讀取數(shù)據(jù)。這會(huì)使應(yīng)用大大簡(jiǎn)化，并且更加高效。

getDOMNode

DOMElement getDOMNode()

如果組件已經(jīng)掛載到了 DOM 上，該方法返回相應(yīng)的本地瀏覽器 DOM 元素。從 DOM 中讀取值的時(shí)候，該方法很有用，比如獲取表單字段的值和做一些 DOM 操作。當(dāng) render 返回 null 或者 false 的時(shí)候，this.getDOMNode() 返回null。

isMounted()

bool isMounted()

如果組件渲染到了 DOM 中，isMounted() 返回 true?？梢允褂迷摲椒ūＷC setState() 和 forceUpdate() 在異步場(chǎng)景下的調(diào)用不會(huì)出錯(cuò)。

setProps

setProps(object nextProps[, function callback])

當(dāng)和一個(gè)外部的 JavaScript 應(yīng)用集成的時(shí)候，你可能想給一個(gè)用 React.render() 渲染的組件打上改變的標(biāo)記。

盡管在同一個(gè)節(jié)點(diǎn)上再次調(diào)用 React.render() 來(lái)更新根組件是首選的方式，也可以調(diào)用 setProps() 來(lái)改變組件的屬性，觸發(fā)一次重新渲染。另外，可以傳遞一個(gè)可選的回調(diào)函數(shù)，該函數(shù)將會(huì)在 setProps 完成并且組件重新渲染完成之后調(diào)用。

注意：

When possible, the declarative approach of calling React.render() again is preferred; it tends to make updates easier to reason about. (There's no significant performance difference between the two approaches.)

剛方法僅在根組件上面調(diào)用。也就是說(shuō)，僅在直接傳給 React.render() 的組件上可用，在它的子級(jí)組件上不可用。如果你傾向于在子組件上使用 setProps()，不要利用響應(yīng)式更新，而是當(dāng)子組件在 render() 中創(chuàng)建的時(shí)候傳入新的 prop 到子組件中。

replaceProps

replaceProps(object nextProps[, function callback])

類似于 setProps()，但是刪除所有已存在的 props，而不是合并新舊兩個(gè) props 對(duì)象。