React Native 學習－組件說明和生命週期

組件的詳細說明（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

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 也不會被調用。）

默認狀況下，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 元素。