元件規範

當你通過呼叫React.createClass()建立一個元件類時，應該提供一個包含render方法和其他可選的生命週期方法的說明物件。

請注意：可以使用簡單的JavaScript類作為元件類。儘管有所不同，但是這些類應該實現大多數相同的函式。關於這些不同的更多資訊，請參考我們關於ES6 class的文章。

render

ReactElement render()

render()方法是必須的。

當呼叫該方法，他應該檢查this.props和this.state，並且返回單一的子元素。子元素可以是一個真實的DOM元件（例如：<div />或者React.DOM.div()

你也可以返回null或者false來表明你不想任何元件被渲染。在這種情況下，React選軟了一個<noscript>標記來適配我們當前的差異演算法。當返回null或者false時，ReactDOM.findDOMNode(this)會返回null。

render()應該是純函式，這意味著他不能修改元件狀態，每次被呼叫應該返回同樣的結果，它不應該讀寫DOM或者用其他的方式和瀏覽器交流（例如，使用setTimeout）。如果你需要作用於瀏覽器，請在componentDidMount或者其他宣告週期中執行。保持render()作為一個純函式能讓服務端渲染更加實際，並且讓元件更容易被理解。

getInitialState

object getInitialState()

在元件被載入之前觸發一次。返回值會被當做元件初始的this.state的值。

getDefaultProps

object getDefaultProps()

當類被建立的時候執行一次，並被快取下來。當props沒有被父元件指定時，對映中的值會被設定為this.props（即使用in檢查）

該方法在所有例項被建立之前觸發，因此不能依賴this.props。除此之外，請注意getDefaultProps()返回的任何複雜物件物件都會在所有例項中共享，而不是拷貝。

propTypes

object propTypes

propTypes物件允許在props在傳遞給元件之後做校驗。關於propTypes的更多資訊，請檢視Reusable Components

mixins

array mixins

mixins陣列允許在多個元件之間共享行為。關於mixins的更多資訊，請檢視Reusable Components

statics

object statics

statics物件允許定義被元件類呼叫的靜態方法。例如：

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

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

在該塊內定義的方法是靜態的，這意味著你可以在任意元件例項被建立之前呼叫該方法，該方法不能獲取到元件的props或者state。如果在一個靜態方法中你想要檢查props的值，請呼叫者將props作為靜態方法的引數傳遞。

displayName

string displayName

displayName字元創被用作除錯資訊。JSX自動設定該值；請檢視JSX in Depth

生命週期方法

在一個元件的生命週期中，不同的方法在不同的時間點被執行。

Mounting: componentWillMount

void componentWillMount()

被觸發一次，在客戶端和服務端都會被執行，在初次渲染髮生之前立即被觸發。如果在該方法中呼叫setState，render()會使用更新後的state，儘管state發生了改變，仍然只執行一次。

Mounting: componentDidMount

void componentDidMount()

只在客戶端（非服務端）被觸發一次，在初次渲染髮生之後立即被處罰。在宣告週期的該點，你可以獲取到你的子節點的任何引用（例如：訪問DOM）。子元件的componentDidMount()在父元件之前被呼叫。

如果你想要整合其他的JavaScript框架、使用setTimeout或者setInterval、傳送AJAX請求，請在該方法中執行。

Updating: componentWillReceiveProps

void componentWillReceiveProps(
  object nextProps
)

每次元件接受到新的props都會被觸發。在首次渲染時，該方法不會被呼叫。

在render()被呼叫之前，使用該函式當做props的過渡，並且通過呼叫this.setState()來更新state。舊的props可以通過this.props獲取到。在該方法中呼叫this.setState()不會觸發額外的渲染。

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

請注意：一個很常見的錯誤是假設在該方法執行過程中props已經改變了。要立即這為什麼無效，請檢視A implies B does not imply B implies A
並沒有一個叫做componentWillReceiveState的類似方法。props轉換可能引起state的改變，但是反過來並不成立。如果你需要在state改變時執行操作，請使用componentWillUpdate。

Updating: shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

當接受到新的props或者state渲染之前被呼叫。在首次渲染或者呼叫forceUpdate時，該方法不會被呼叫。

當你確定新的props或者state不會引起元件更新時，返回false。

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

如果shouldComponentUpdate返回false，render()函式會被完全跳過，知道下一次state改變。除此之外，componentWillUpdate和componentDidUpdate也不會被呼叫。

預設情況下，當state發生變化shouldComponentUpdate永遠返回true來阻止微妙的bug，但是如果你等將state處理為不可變的，在render()中僅僅讀取props和state，然後可以通過比較舊的props和state來實現shouldComponentUpdate。

如果效能是一個瓶頸，特別是有成百上千個元件時，使用shouldComponentUpdate來加速應用。

Updating: componentWillUpdate

void componentWillUpdate(
  object nextProps, object nextState
)

當接受到新的props和state時，進行渲染之前立刻被呼叫。該方法在初次渲染時不會被呼叫。

使用此方法作為在更新發生之前執行準備的機會。

請注意：在該方法中不能使用this.setState()。如果你需要響應prop的改變，請使用componentWillReceiveProps。

Updating: componentDidUpdate

void componentDidUpdate(
  object prevProps, object prevState
)

當元件更新生成DOM之後立即被觸發。該方法在首次渲染時不會被呼叫。

使用該方法作為元件更新後操作DOM的機會。

Unmounting: componentWillUnmount

void componentWillUnmount()

當一個元件被從DOM移除之後立即被觸發。

在該方法中執行清理工作，例如刪除在componentDidMount時新增的定時器和清理DOM元素。