組件的詳細(xì)說明和生命周期

組件的詳細(xì)說明（Component Specifications）

當(dāng)通過調(diào)用 React.createClass() 來(lái)創(chuàng)建組件的時(shí)候，你應(yīng)該提供一個(gè)包含 render 方法的對(duì)象，并且也可以包含其它的在這里描述的生命周期方法。

render

ReactComponent render()

render() 方法是必須的。

當(dāng)調(diào)用的時(shí)候，會(huì)檢測(cè) this.props 和 this.state，返回一個(gè)單子級(jí)組件。該子級(jí)組件可以是虛擬的本地 DOM 組件（比如 <div /> 或者 React.DOM.div()），也可以是自定義的復(fù)合組件。

你也可以返回 null 或者 false 來(lái)表明不需要渲染任何東西。實(shí)際上，React 渲染一個(gè) <noscript> 標(biāo)簽來(lái)處理當(dāng)前的差異檢查邏輯。當(dāng)返回 null 或者 false 的時(shí)候，this.getDOMNode() 將返回 null。

render() 函數(shù)應(yīng)該是純粹的，也就是說該函數(shù)不修改組件 state，每次調(diào)用都返回相同的結(jié)果，不讀寫 DOM 信息，也不和瀏覽器交互（例如通過使用 setTimeout）。如果需要和瀏覽器交互，在 componentDidMount() 中或者其它生命周期方法中做這件事。保持 render() 純粹，可以使服務(wù)器端渲染更加切實(shí)可行，也使組件更容易被理解。

getInitialState

object getInitialState()

在組件掛載之前調(diào)用一次。返回值將會(huì)作為 this.state 的初始值。

getDefaultProps

object getDefaultProps()

在組件類創(chuàng)建的時(shí)候調(diào)用一次，然后返回值被緩存下來(lái)。如果父組件沒有指定 props 中的某個(gè)鍵，則此處返回的對(duì)象中的相應(yīng)屬性將會(huì)合并到 this.props （使用 in 檢測(cè)屬性）。

該方法在任何實(shí)例創(chuàng)建之前調(diào)用，因此不能依賴于 this.props。另外，getDefaultProps() 返回的任何復(fù)雜對(duì)象將會(huì)在實(shí)例間共享，而不是每個(gè)實(shí)例擁有一份拷貝。

propTypes

object propTypes

propTypes 對(duì)象允許驗(yàn)證傳入到組件的 props。更多關(guān)于 propTypes 的信息，參考可重用的組件。

mixins

array mixins

mixin 數(shù)組允許使用混合來(lái)在多個(gè)組件之間共享行為。更多關(guān)于混合的信息，參考可重用的組件。

statics

object statics

statics 對(duì)象允許你定義靜態(tài)的方法，這些靜態(tài)的方法可以在組件類上調(diào)用。例如：

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

在這個(gè)塊兒里面定義的方法都是靜態(tài)的，意味著你可以在任何組件實(shí)例創(chuàng)建之前調(diào)用它們，這些方法不能獲取組件的 props 和 state。如果你想在靜態(tài)方法中檢查 props 的值，在調(diào)用處把 props 作為參數(shù)傳入到靜態(tài)方法。

displayName

string displayName

displayName 字符串用于輸出調(diào)試信息。JSX 自動(dòng)設(shè)置該值；參考JSX 深入。

生命周期方法

許多方法在組件生命周期中某個(gè)確定的時(shí)間點(diǎn)執(zhí)行。

掛載： componentWillMount

componentWillMount()

服務(wù)器端和客戶端都只調(diào)用一次，在初始化渲染執(zhí)行之前立刻調(diào)用。如果在這個(gè)方法內(nèi)調(diào)用 setState，render() 將會(huì)感知到更新后的 state，將會(huì)執(zhí)行僅一次，盡管 state 改變了。

掛載： componentDidMount

componentDidMount()

在初始化渲染執(zhí)行之后立刻調(diào)用一次，僅客戶端有效（服務(wù)器端不會(huì)調(diào)用）。在生命周期中的這個(gè)時(shí)間點(diǎn)，組件擁有一個(gè) DOM 展現(xiàn)，你可以通過 this.getDOMNode() 來(lái)獲取相應(yīng) DOM 節(jié)點(diǎn)。

如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 來(lái)設(shè)置定時(shí)器，或者發(fā)送 AJAX 請(qǐng)求，可以在該方法中執(zhí)行這些操作。

注意：

為了兼容 v0.9，DOM 節(jié)點(diǎn)作為最后一個(gè)參數(shù)傳入。你依然可以通過 this.getDOMNode() 獲取 DOM 節(jié)點(diǎn)。

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在組件接收到新的 props 的時(shí)候調(diào)用。在初始化渲染的時(shí)候，該方法不會(huì)調(diào)用。

用此函數(shù)可以作為 react 在 prop 傳入之后， render() 渲染之前更新 state 的機(jī)會(huì)。老的 props 可以通過 this.props 獲取到。在該函數(shù)中調(diào)用 this.setState() 將不會(huì)引起第二次渲染。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

注意：

對(duì)于 state，沒有相似的方法： componentWillReceiveState。將要傳進(jìn)來(lái)的 prop 可能會(huì)引起 state 改變，反之則不然。如果需要在 state 改變的時(shí)候執(zhí)行一些操作，請(qǐng)使用 componentWillUpdate。

更新： shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state，將要渲染之前調(diào)用。該方法在初始化渲染的時(shí)候不會(huì)調(diào)用，在使用 forceUpdate 方法的時(shí)候也不會(huì)。

如果確定新的 props 和 state 不會(huì)導(dǎo)致組件更新，則此處應(yīng)該 返回 false。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果 shouldComponentUpdate 返回 false，則 render() 將不會(huì)執(zhí)行，直到下一次 state 改變。（另外，componentWillUpdate 和 componentDidUpdate 也不會(huì)被調(diào)用。）

默認(rèn)情況下，shouldComponentUpdate 總會(huì)返回 true，在 state 改變的時(shí)候避免細(xì)微的 bug，但是如果總是小心地把 state 當(dāng)做不可變的，在 render() 中只從 props 和 state 讀取值，此時(shí)你可以覆蓋 shouldComponentUpdate 方法，實(shí)現(xiàn)新老 props 和 state 的比對(duì)邏輯。

如果性能是個(gè)瓶頸，尤其是有幾十個(gè)甚至上百個(gè)組件的時(shí)候，使用 shouldComponentUpdate 可以提升應(yīng)用的性能。

更新： componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state 之前立刻調(diào)用。在初始化渲染的時(shí)候該方法不會(huì)被調(diào)用。

使用該方法做一些更新之前的準(zhǔn)備工作。

注意：

你不能在剛方法中使用 this.setState()。如果需要更新 state 來(lái)響應(yīng)某個(gè) prop 的改變，請(qǐng)使用 componentWillReceiveProps。

更新： componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。該方法不會(huì)在初始化渲染的時(shí)候調(diào)用。

使用該方法可以在組件更新之后操作 DOM 元素。

注意：

為了兼容 v0.9，DOM 節(jié)點(diǎn)會(huì)作為最后一個(gè)參數(shù)傳入。如果使用這個(gè)方法，你仍然可以使用 this.getDOMNode() 來(lái)訪問 DOM 節(jié)點(diǎn)。

移除： componentWillUnmount

componentWillUnmount()

在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。

在該方法中執(zhí)行任何必要的清理，比如無(wú)效的定時(shí)器，或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素。