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

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="message" align="center"></div>

    <script type="text/babel">
      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')
      );
    </script>
  </body>
</html>

執行實例 »點擊 "執行實例" 按鈕查看線上實例

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

←
→