# 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()在異步場景下的調用不會出錯。