React 組件 API

React 組件 API

在本章節(jié)中我們將討論 React 組件 API。

我們將講解以下7個方法:

• 設(shè)置狀態(tài)：?setState?
• 替換狀態(tài)：?replaceState?
• 設(shè)置屬性：?setProps?
• 替換屬性：?replaceProps?
• 強制更新：?forceUpdate?
• 獲取DOM節(jié)點：?findDOMNode?
• 判斷組件掛載狀態(tài)：?isMounted?

設(shè)置狀態(tài):setState

setState(object nextState[, function callback])

參數(shù)說明

• nextState，將要設(shè)置的新狀態(tài)，該狀態(tài)會和當(dāng)前的state合并
• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在setState設(shè)置成功，且組件重新渲染后調(diào)用。

合并nextState和當(dāng)前state，并重新渲染組件。

setState是React事件處理函數(shù)中和請求回調(diào)函數(shù)中觸發(fā)UI更新的主要方法。

關(guān)于setState

注意: 不能在組件內(nèi)部通過?this.state?修改狀態(tài)，因為該狀態(tài)會在調(diào)用?setState()?后被替換。

setState() 并不會立即改變 this.state，而是創(chuàng)建一個即將處理的state。

setState() 并不一定是同步的，為了提升性能React會批量執(zhí)行state和DOM渲染。

setState() 總是會觸發(fā)一次組件重繪，除非在shouldComponentUpdate()中實現(xiàn)了一些條件渲染邏輯。

實例

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}>點我！點擊次數(shù)為: {this.state.clickCount}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);

嘗試一下 ?

實例中通過點擊 h2 標(biāo)簽來使得點擊計數(shù)器加 1。

替換狀態(tài)：replaceState

replaceState(object nextState[, function callback])

• nextState，將要設(shè)置的新狀態(tài)，該狀態(tài)會替換當(dāng)前的state。
• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在replaceState設(shè)置成功，且組件重新渲染后調(diào)用。

replaceState()方法與setState()類似，但是方法只會保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會被刪除。

設(shè)置屬性：setProps

setProps(object nextProps[, function callback])

• nextProps，將要設(shè)置的新屬性，該狀態(tài)會和當(dāng)前的props合并
• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在setProps設(shè)置成功，且組件重新渲染后調(diào)用。

設(shè)置組件屬性，并重新渲染組件。

props相當(dāng)于組件的數(shù)據(jù)流，它總是會從父組件向下傳遞至所有的子組件中。當(dāng)和一個外部的JavaScript應(yīng)用集成時，我們可能會需要向組件傳遞數(shù)據(jù)或通知React.render()組件需要重新渲染，可以使用setProps()。

更新組件，我可以在節(jié)點上再次調(diào)用React.render()，也可以通過setProps()方法改變組件屬性，觸發(fā)組件重新渲染。

替換屬性：replaceProps

replaceProps(object nextProps[, function callback])

• nextProps，將要設(shè)置的新屬性，該屬性會替換當(dāng)前的props。
• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在replaceProps設(shè)置成功，且組件重新渲染后調(diào)用。

replaceProps()方法與setProps類似，但它會刪除原有

props

強制更新：forceUpdate

forceUpdate([function callback])

參數(shù)說明

• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在組件render()方法調(diào)用后調(diào)用。

forceUpdate()方法會使組件調(diào)用自身的render()方法重新渲染組件，組件的子組件也會調(diào)用自己的render()。但是，組件重新渲染時，依然會讀取this.props和this.state，如果狀態(tài)沒有改變，那么React只會更新DOM。

forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后），通過該方法通知React需要調(diào)用render()

一般來說，應(yīng)該盡量避免使用forceUpdate()，而僅從this.props和this.state中讀取狀態(tài)并由React觸發(fā)render()調(diào)用。

獲取DOM節(jié)點：findDOMNode

DOMElement findDOMNode()

• 返回值：DOM元素DOMElement

如果組件已經(jīng)掛載到DOM中，該方法返回對應(yīng)的本地瀏覽器 DOM 元素。當(dāng)render返回null 或 false時，this.findDOMNode()也會返回null。從DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。

判斷組件掛載狀態(tài)：isMounted

bool isMounted()

• 返回值：true或false，表示組件是否已掛載到DOM中

isMounted()方法用于判斷組件是否已掛載到DOM中?？梢允褂迷摲椒ūＷC了setState()和forceUpdate()在異步場景下的調(diào)用不會出錯。

本文參考：http://itbilu.com/javascript/react/EkACBdqKe.html

相關(guān)閱讀

HTML DOM 節(jié)點