Latest web development tutorials

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()中實現了一些條件渲染邏輯。

實例 

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

嘗試一下»

實例中通過點擊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