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 例項

class Counter extends React.Component{ constructor(props) { super(props); this.state = {clickCount: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); } render () { return (<h2 onClick={this.handleClick}>點我！點選次數為: {this.state.clickCount}</h2>); } } ReactDOM.render( <Counter />, document.getElementById('example') );

嘗試一下 ?

例項中通過點選 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