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 元素。

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