一、元件的詳細說明和生命週期ComponentSpecs and Lifecycle

元件的詳細說明（Component Specifications）

當通過呼叫 React.createClass() 來建立元件的時候，你應該提供一個包含 render 方法的物件，並且也可以包含其它的在這裡描述的生命週期方法。

render

ReactComponent render()

render() 方法是必須的。

當呼叫的時候，會檢測 this.props 和 this.state，返回一個單子級元件。該子級元件可以是虛擬的本地DOM 元件（比如 <div />

 或者 React.DOM.div()），也可以是自定義的複合元件。

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

render() 函式應該是純粹的，也就是說該函式不修改元件state，每次呼叫都返回相同的結果，不讀寫 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 的資訊，參考可重用的元件。

mixins

array mixins

mixin 陣列允許使用混合來在多個元件之間共享行為。更多關於混合的資訊，參考可重用的元件。

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 深入。

生命週期方法

許多方法在元件生命週期中某個確定的時間點執行。

掛載： componentWillMount

componentWillMount()

伺服器端和客戶端都只調用一次，在初始化渲染執行之前立刻呼叫。如果在這個方法內呼叫setState，render() 將會感知到更新後的state，將會執行僅一次，儘管 state 改變了。

掛載： componentDidMount

componentDidMount()

在初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫）。在生命週期中的這個時間點，元件擁有一個DOM 展現，你可以通過 this.getDOMNode() 來獲取相應 DOM 節點。

如果想和其它JavaScript 框架整合，使用 setTimeout 或者 setInterval 來設定定時器，或者傳送 AJAX請求，可以在該方法中執行這些操作。

注意：

為了相容 v0.9，DOM節點作為最後一個引數傳入。你依然可以通過this.getDOMNode() 獲取 DOM 節點。

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在元件接收到新的props 的時候呼叫。在初始化渲染的時候，該方法不會呼叫。

用此函式可以作為react 在 prop 傳入之後， render() 渲染之前更新 state 的機會。老的 props 可以通過 this.props 獲取到。在該函式中呼叫 this.setState() 將不會引起第二次渲染。

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

注意：

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

更新： shouldComponentUpdate

booleanshouldComponentUpdate(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 也不會被呼叫。）

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

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

更新： componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在接收到新的props 或者 state 之前立刻呼叫。在初始化渲染的時候該方法不會被呼叫。

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

注意：

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

更新： componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在元件的更新已經同步到DOM 中之後立刻被呼叫。該方法不會在初始化渲染的時候呼叫。

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

注意：

為了相容 v0.9，DOM節點會作為最後一個引數傳入。如果使用這個方法，你仍然可以使用 this.getDOMNode() 來訪問 DOM 節點。

移除： componentWillUnmount

componentWillUnmount()

在元件從DOM 中移除的時候立刻被呼叫。

在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素。

二、元件API

ReactComponent

React元件例項在渲染的時候建立。這些例項在接下來的渲染中被重複使用，可以在元件方法中通過 this 訪問。唯一一種在 React 之外獲取 React元件例項控制代碼的方式就是儲存React.render 的返回值。在其它元件內，可以使用 refs 得到相同的結果。

setState

setState(object nextState[,function callback])

合併nextState 和當前 state。這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。另外，也支援可選的回撥函式，該函式在 setState 執行完畢並且元件重新渲染完成之後呼叫。

注意：

絕對不要直接改變 this.state，因為在之後呼叫 setState() 可能會替換掉你做的更改。把 this.state 當做不可變的。

setState() 不會立刻改變 this.state，而是建立一個即將處理的 state 轉變。在呼叫該方法之後獲取 this.state 的值可能會得到現有的值，而不是最新設定的值。

不保證 setState() 呼叫的同步性，為了提升效能，可能會批量執行 state 轉變和 DOM 渲染。

setState() 將總是觸發一次重繪，除非在 shouldComponentUpdate() 中實現了條件渲染邏輯。如果使用可變的物件，但是又不能在 shouldComponentUpdate() 中實現這種邏輯，僅在新 state 和之前的 state存在差異的時候呼叫 setState() 可以避免不必要的重新渲染。

replaceState

replaceState(object nextState[,function callback])

類似於 setState()，但是刪除之前所有已存在的 state鍵，這些鍵都不在 nextState 中。

forceUpdate()

forceUpdate([function callback])

如果 render() 方法從 this.props 或者 this.state 之外的地方讀取資料，你需要通過呼叫 forceUpdate() 告訴 React什麼時候需要再次執行 render()。如果直接改變了this.state，也需要呼叫 forceUpdate()。

呼叫 forceUpdate() 將會導致 render() 方法在相應的元件上被呼叫，並且子級元件也會呼叫自己的 render()，但是如果標記改變了，那麼 React僅會更新 DOM。

通常情況下，應該儘量避免所有使用 forceUpdate() 的情況，在 render() 中僅從this.props 和 this.state 中讀取資料。這會使應用大大簡化，並且更加高效。

getDOMNode

DOMElement getDOMNode()

如果元件已經掛載到了DOM 上，該方法返回相應的本地瀏覽器 DOM 元素。從 DOM 中讀取值的時候，該方法很有用，比如獲取表單欄位的值和做一些 DOM 操作。當 render 返回null 或者 false 的時候，this.getDOMNode() 返回 null。

isMounted()

bool isMounted()

如果元件渲染到了DOM 中，isMounted() 返回true。可以使用該方法保證 setState() 和forceUpdate() 在非同步場景下的呼叫不會出錯。

setProps

setProps(object nextProps[,function callback])

當和一個外部的JavaScript 應用整合的時候，你可能想給一個用 React.render() 渲染的元件打上改變的標記。

儘管在同一個節點上再次呼叫 React.render() 來更新根元件是首選的方式，也可以呼叫setProps() 來改變元件的屬性，觸發一次重新渲染。另外，可以傳遞一個可選的回撥函式，該函式將會在 setProps 完成並且元件重新渲染完成之後呼叫。

注意：

When possible,the declarative approach of calling React.render() againis preferred; it tends to make updates easier to reason about. (There's nosignificant performance difference between the two approaches.)

剛方法僅在根元件上面呼叫。也就是說，僅在直接傳給 React.render() 的元件上可用，在它的子級元件上不可用。如果你傾向於在子元件上使用 setProps()，不要利用響應式更新，而是當子元件在 render() 中建立的時候傳入新的prop 到子元件中。

replaceProps

replaceProps(object nextProps[,function callback])

類似於 setProps()，但是刪除所有已存在的props，而不是合併新舊兩個 props 物件。

三、元件的詳細說明和生命週期（ComponentSpecs and Lifecycle）

元件的詳細說明（Component Specifications）

當通過呼叫 React.createClass() 來建立元件的時候，你應該提供一個包含 render 方法的物件，並且也可以包含其它的在這裡描述的生命週期方法。

render

ReactComponent render()

render() 方法是必須的。

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

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

render() 函式應該是純粹的，也就是說該函式不修改元件state，每次呼叫都返回相同的結果，不讀寫 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 的資訊，參考可重用的元件。

mixins

array mixins

mixin 陣列允許使用混合來在多個元件之間共享行為。更多關於混合的資訊，參考可重用的元件。

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 深入。

生命週期方法

許多方法在元件生命週期中某個確定的時間點執行。

掛載： componentWillMount

componentWillMount()

伺服器端和客戶端都只調用一次，在初始化渲染執行之前立刻呼叫。如果在這個方法內呼叫setState，render() 將會感知到更新後的state，將會執行僅一次，儘管 state 改變了。

掛載： componentDidMount

componentDidMount()

在初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫）。在生命週期中的這個時間點，元件擁有一個DOM 展現，你可以通過 this.getDOMNode() 來獲取相應 DOM 節點。

如果想和其它JavaScript 框架整合，使用 setTimeout 或者 setInterval 來設定定時器，或者傳送 AJAX請求，可以在該方法中執行這些操作。

注意：

為了相容 v0.9，DOM節點作為最後一個引數傳入。你依然可以通過this.getDOMNode() 獲取 DOM 節點。

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在元件接收到新的props 的時候呼叫。在初始化渲染的時候，該方法不會呼叫。

用此函式可以作為react 在 prop 傳入之後， render() 渲染之前更新 state 的機會。老的 props 可以通過 this.props 獲取到。在該函式中呼叫 this.setState() 將不會引起第二次渲染。

componentWillReceiveProps:function(nextProps){
  this.setState({
    likesIncreasing

相關推薦