React組件生命週期及組件之間的通訊

目錄

• 1.組件生命週期
  • 1.建立階段
  • 2.實例化階段
  • 3.更新階段
  • 4.銷燬階段
• 2.組件之間的通訊
• 3.其它tips

名詞解釋

• 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，這是一本不錯的入門書，講得很詳細。