React 組件實例在渲染的時候創(chuàng)建。這些實例在接下來的渲染中被重復使用,可以在組件方法中通過 this 訪問。唯一一種在 React 之外獲取 React 組件實例句柄的方式就是保存 React.render 的返回值。在其它組件內,可以使用 refs 得到相同的結果。
setState(object nextState[, function callback])
合并 nextState 和當前 state。這是在事件處理函數(shù)中和請求回調函數(shù)中觸發(fā) UI 更新的主要方法。另外,也支持可選的回調函數(shù),該函數(shù)在 setState 執(zhí)行完畢并且組件重新渲染完成之后調用。
注意:
絕對不要直接改變
this.state,因為在之后調用setState()可能會替換掉你做的更改。把this.state當做不可變的。
setState()不會立刻改變this.state,而是創(chuàng)建一個即將處理的 state 轉變。在調用該方法之后獲取this.state的值可能會得到現(xiàn)有的值,而不是最新設置的值。不保證
setState()調用的同步性,為了提升性能,可能會批量執(zhí)行 state 轉變和 DOM 渲染。
setState()將總是觸發(fā)一次重繪,除非在shouldComponentUpdate()中實現(xiàn)了條件渲染邏輯。如果使用可變的對象,但是又不能在shouldComponentUpdate()中實現(xiàn)這種邏輯,僅在新 state 和之前的 state 存在差異的時候調用setState()可以避免不必要的重新渲染。
replaceState(object nextState[, function callback])
類似于 setState(),但是刪除之前所有已存在的 state 鍵,這些鍵都不在 nextState 中。
forceUpdate([function callback])
如果 render() 方法從 this.props 或者 this.state 之外的地方讀取數(shù)據(jù),你需要通過調用 forceUpdate() 告訴 React 什么時候需要再次運行 render()。如果直接改變了 this.state,也需要調用 forceUpdate()。
調用 forceUpdate() 將會導致 render() 方法在相應的組件上被調用,并且子級組件也會調用自己的 render(),但是如果標記改變了,那么 React 僅會更新 DOM。
通常情況下,應該盡量避免所有使用 forceUpdate() 的情況,在 render() 中僅從 this.props 和 this.state 中讀取數(shù)據(jù)。這會使應用大大簡化,并且更加高效。
DOMElement getDOMNode()
如果組件已經(jīng)掛載到了 DOM 上,該方法返回相應的本地瀏覽器 DOM 元素。從 DOM 中讀取值的時候,該方法很有用,比如獲取表單字段的值和做一些 DOM 操作。當 render 返回 null 或者 false 的時候,this.getDOMNode() 返回 null。
bool isMounted()
如果組件渲染到了 DOM 中,isMounted() 返回 true??梢允褂迷摲椒ūWC setState() 和 forceUpdate() 在異步場景下的調用不會出錯。
setProps(object nextProps[, function callback])
當和一個外部的 JavaScript 應用集成的時候,你可能想給一個用 React.render() 渲染的組件打上改變的標記。
盡管在同一個節(jié)點上再次調用 React.render() 來更新根組件是首選的方式,也可以調用 setProps() 來改變組件的屬性,觸發(fā)一次重新渲染。另外,可以傳遞一個可選的回調函數(shù),該函數(shù)將會在 setProps 完成并且組件重新渲染完成之后調用。
注意:
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.)剛方法僅在根組件上面調用。也就是說,僅在直接傳給
React.render()的組件上可用,在它的子級組件上不可用。如果你傾向于在子組件上使用setProps(),不要利用響應式更新,而是當子組件在render()中創(chuàng)建的時候傳入新的 prop 到子組件中。
replaceProps(object nextProps[, function callback])
類似于 setProps(),但是刪除所有已存在的 props,而不是合并新舊兩個 props 對象。