React 元件 API
在本章節中我們將討論 React 元件 API。我們將講解以下7個方法:
- 設定狀態:setState
- 替換狀態:replaceState
- 設定屬性:setProps
- 替換屬性:replaceProps
- 強制更新:forceUpdate
- 獲取DOM節點:findDOMNode
- 判斷元件掛載狀態:isMounted
設定狀態:setState
setState(object nextState[, function callback])
引數說明
- nextState,將要設定的新狀態,該狀態會和當前的state合併
- callback,可選引數,回撥函式。該函式會在setState設定成功,且元件重新渲染後呼叫。
合併nextState和當前state,並重新渲染元件。setState是React事件處理函式中和請求回撥函式中觸發UI更新的主要方法。
關於setState
不能在元件內部通過this.state修改狀態,因為該狀態會在呼叫setState()後被替換。
setState()並不會立即改變this.state,而是建立一個即將處理的state。setState()並不一定是同步的,為了提升效能React會批量執行state和DOM渲染。
setState()總是會觸發一次元件重繪,除非在shouldComponentUpdate()中實現了一些條件渲染邏輯。
例項
React 例項
嘗試一下 ?
例項中通過點選 h2 標籤來使得點選計數器加 1。
替換狀態:replaceState
replaceState(object nextState[, function callback])
- nextState,將要設定的新狀態,該狀態會替換當前的state。
- callback,可選引數,回撥函式。該函式會在replaceState設定成功,且元件重新渲染後呼叫。
replaceState()方法與setState()類似,但是方法只會保留nextState中狀態,原state不在nextState中的狀態都會被刪除。
設定屬性:setProps
setProps(object nextProps[, function callback])
- nextProps,將要設定的新屬性,該狀態會和當前的props合併
- callback,可選引數,回撥函式。該函式會在setProps設定成功,且元件重新渲染後呼叫。
設定元件屬性,並重新渲染元件。
props相當於元件的資料流,它總是會從父元件向下傳遞至所有的子元件中。當和一個外部的JavaScript應用整合時,我們可能會需要向元件傳遞資料或通知React.render()元件需要重新渲染,可以使用setProps()。
更新元件,我可以在節點上再次呼叫React.render(),也可以通過setProps()方法改變元件屬性,觸發元件重新渲染。
替換屬性:replaceProps
replaceProps(object nextProps[, function callback])
- nextProps,將要設定的新屬性,該屬性會替換當前的props。
- callback,可選引數,回撥函式。該函式會在replaceProps設定成功,且元件重新渲染後呼叫。
replaceProps()方法與setProps類似,但它會刪除原有 props。
強制更新:forceUpdate
forceUpdate([function callback])
引數說明
- callback,可選引數,回撥函式。該函式會在元件render()方法呼叫後呼叫。
forceUpdate()方法會使元件呼叫自身的render()方法重新渲染元件,元件的子元件也會呼叫自己的render()。但是,元件重新渲染時,依然會讀取this.props和this.state,如果狀態沒有改變,那麼React只會更新DOM。
forceUpdate()方法適用於this.props和this.state之外的元件重繪(如:修改了this.state後),通過該方法通知React需要呼叫render()
一般來說,應該儘量避免使用forceUpdate(),而僅從this.props和this.state中讀取狀態並由React觸發render()呼叫。
獲取DOM節點:findDOMNode
DOMElement findDOMNode()
- 返回值:DOM元素DOMElement
如果元件已經掛載到DOM中,該方法返回對應的本地瀏覽器 DOM 元素。當render返回null 或 false時,this.findDOMNode()也會返回null。從DOM 中讀取值的時候,該方法很有用,如:獲取表單欄位的值和做一些 DOM 操作。
判斷元件掛載狀態:isMounted
bool isMounted()
- 返回值:true或false,表示元件是否已掛載到DOM中
isMounted()方法用於判斷元件是否已掛載到DOM中。可以使用該方法保證了setState()和forceUpdate()在非同步場景下的呼叫不會出錯。
本文參考:http://itbilu.com/javascript/react/EkACBdqKe.html