from:http://blog.csdn.net/qq_32014215/article/details/67636798
組件的詳細說明和生命周期(Component Specs 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
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()