組件的詳細說明和生命周期

組件的詳細說明（Component Specifications）

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

render

ReactComponent render()

render() 方法是必須的。

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

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

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

getInitialState

object getInitialState()

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

getDefaultProps

object getDefaultProps()

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

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

propTypes

object propTypes

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

mixins

array mixins

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

statics

object statics

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

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

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

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

displayName

string displayName

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

生命周期方法

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

掛載： componentWillMount

componentWillMount()

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

掛載： componentDidMount

componentDidMount()

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

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

注意：

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

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps)

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

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

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

注意：

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

更新： shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

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

如果確定新的 props 和 state 不會導致組件更新，則此處應該 返回 false。

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

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

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

如果性能是個瓶頸，尤其是有幾十個甚至上百個組件的時候，使用 shouldComponentUpdate 可以提升應用的性能。

更新： componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

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

使用該方法做一些更新之前的準備工作。

注意：

你不能在剛方法中使用 this.setState()。如果需要更新 state 來響應某個 prop 的改變，請使用componentWillReceiveProps。

更新： componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

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

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

注意：

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

移除： componentWillUnmount

componentWillUnmount()

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

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