[TOC] 名詞解釋 state： 它是組件的屬性，主要用來存儲組件自身需要的數據。 虛擬DOM： 它是ReactJS中提出的一個概念，是將真實的DOM結構映射成一個JSON數據結構。 1.組件生命周期 1.創建階段 ：該方法會返回一個對象，並緩存下來。然後與父組件指定的props對象合併，最後賦值 ...
[TOC]
名詞解釋
- state：它是組件的屬性，主要用來存儲組件自身需要的數據。
- 虛擬DOM：它是ReactJS中提出的一個概念，是將真實的DOM結構映射成一個JSON數據結構。
1.組件生命周期
1.創建階段
getDefaultProps()：該方法會返回一個對象，並緩存下來。然後與父組件指定的props對象合併，最後賦值給this.props作為該組件的預設屬性。
2.實例化階段
getInitialState()：初始化組件state的值，其返回值會賦值給組件的this.state屬性。componentWillMount()：業務邏輯的處理都應該放在這裡，如對state的操作等。render()：渲染並返回一個虛擬DOM。當返回null或false時，表明不需要渲染任何東西。componentDidMount()：在該方法中，ReactJS會使用render方法返回的虛擬DOM對象來創建真是的DOM結構。在這裡可以對根據虛擬DOM結構而生成的真實DOM進行相應的處理 。
3.更新階段
主要發生在用戶操作之後或父組件有更新的時候。
componentWillReceiveProps(object nextProps)：在該函數中，通常可以調用this.setState方法來完成對state的修改。shouldComponentUpdate(nextProps, nextState)：該方法用來攔截新的props或state，然後根據實現設定好的判斷邏輯，作出最後要不要更新組件的決定。return一個boolean值。componentWillUpdate(object nextProps, object nextState)：當shouldComponentUpdate()返回true時，可以在該方法中做一些更新之前的操作。render：根據一系列的diff演算法，生成需要更新的虛擬DOM數據。實踐表明，在render中，最後只做數據和模板的組合，不應進行state等邏輯的修改，這樣組件結構更清晰。componentDidUpdate：該方法在組件的更新已經同步到DOM中後出發，我們常在該方法中做一些DOM操作。
4.銷毀階段
componentWillUnmount：當組件需要從DOM中移除時，我們通常會做一些取消事件綁定、移除虛擬DOM中對應的組件數據結構、銷毀一些無效的定時器等工作。
2.組件之間的通信
- 子組件調用父組件的方法：
只需父組件把要被調用的方法以屬性的方式放在子組件上，子組件內部便可以通過“this.props.被調用的方法”這樣的方式來獲得父組件傳過來的方法。 - 父組件調用子組件的方法：
子組件被設置為ref之後，父組件就可以通過this.ref.xxx來獲取到子組件了。其中xxx為子組件ref的值。
3.其它tips
合理使用key屬性：
合理使用key屬性有時能減少需要頁面渲染時更新的DOM節點。
如在沒有key屬性的First和Second組件之間插入一個Third組件，React JS的Diff演算法的結果是，First組件不變，先將Second組件進行刪除，然後在創建並插入Third組件，最後再創建並插入Second組件。
如果給上述三個組件都添加上key屬性，則演算法結果會有所改變：First組件不變，Second組件不變，只是在Second組件之前創建並插入來Third組件。
最近在學習React Native，重溫了一下React組件的生命周期及組件之間的通信。
以上內容來自《React Native入門與實踐》一書的部分讀書筆記，BTW，這是一本不錯的入門書，講得很詳細。
