react生命週期 (16.4前)

生命週期

react生命週期共分爲4個階段

1. 初始化階段
2. 組件的掛載階段
3. 組件的更新階段
4. 組件的銷燬階段

初始化階段

1. setup props and state

組件的掛載階段

1. componentWillMount
   • 在掛載組件以前掉用,且只會調用一次，在這裏面調用this.setState不會引發組件的從新渲染，也能夠把寫在這邊的內容提早到constructor()中。 項目中不多用到
2. render
   • 根據組件的props和state渲染頁面。不能在裏面執行this.setState,會有改變組件狀態的反作用
3. componentDidMount
   • 組件掛載到DOM後調用，且只會被調用一次

組件的更新階段

組件的更新又分爲兩種，一種是props的更新，一種是state的更新

props
1. componentWillReceiveProps
    * 只調用於props引發的組件更新
    
state
1. shouldComponentUpdate
    * 是否繼續更新，返回true表示當前組件將繼續執行更新過程，返回false則中止當前更新，以此來減小組件沒必要要的渲染，優化組件性能
2. componentWillUpdate
    * 在調用render前調用，能夠作一些組件更新前的工做，通常不多用
3. render
    * 根據組件的props和state渲染頁面。不能在裏面執行this.setState,會有改變組件狀態的反作用
4. componentDidUpdate
    * 在組件更新後調用，能夠操做組件更新的DOM.

組件的銷燬階段

1. componentWillUnmount
   • 在組件被銷燬的時候調用，能夠在裏面作一些銷燬工做（清除定時器）