隨便扯扯React生命週期 --《愛看不看系列》

　　生命週期嘛，顧名思義，就是說組件這輩子從生下來到死掉經歷的事情。先來看看一張圖片，溫故溫故，如圖：

 

你會發現有些週期的名字都能找出點規律，我找到的規律是凡是 Will 字母的，表示該鉤子函數會在該生命週期發生以前調用；包含前綴did表示該鉤子函數會在該生命週期發生以後調用。

 

大概給生命週期分及各種：

一、Mounting(掛載)

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

上面幾個函數會在組件被建立和插入到DOM後調用

 

二、Updating（更新）

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

props 或者 state 的變化都會致使更新。上面這些方法會在 組件 從新渲染時調用。

 

三、Unmounting

1. componentWillUnmount()

該方法將會在 組件 從DOM中移除時調用

 

 

分完類以後就來依次說說各個組件是幹什麼的咯，怕是每一個寫react的程序員都會有本身的看法咯。

　　1. componentWillMount()

這個組件我的以爲爭議很大，有的人說能夠在這個鉤子函數內寫ajax請求，有的說不行，我仍是保持我本身的觀念，

不能在裏面使用setState方法來更新組件，由於它是在render函數以前執行的，也就是說執行它的時候，DOM節點

是尚未掛在的，強行setState會致使React Component 的 re-render。

　　2. componentDidMount()

這個函數在組件掛在以後執行的，因此比較適合用做初始化DOM節點的操做和AJAX請求。

在該鉤子函數裏面，可使用 setState 可是會觸發從新渲染 re-render 。　

　　3.componentWillReceiveProps(nextProps)

該鉤子函數將會在已掛載組件（mounted component）接收到新的 props 以前調用。適用於更新state的值（從新渲染）

比較this.props和nextProps。有一個要注意的地方就是，props即便沒有變化，也會調用這個鉤子函數，因此，通常咱們的

作法就是比較this.props和nextProps。

　　4.shouldComponentUpdate(nextProps, nextState)

當組件接收到新的 Props 或者 state時，要進行 rendering以前會調用 shouldComponentUpdate()。該鉤子函數用於告訴 React 組件是否須要從新渲染。

shouldComponentUpdate() 默認返回 true。

shouldComponentUpdate() 在兩種狀況下不會被調用：一、初始化渲染；二、使用了forceUpdate（）方法。

可是當 shouldComponentUpdate() 返回 false 的時候，此時 state 發生改變，並不能阻止 child component 進行從新渲染。
可是一旦 shouldComponentUpdate() 返回 false，這就意味着 componentWillUpdate()、 render() 和 componentDidUpdate() 將再也不執行。

 

　　5.componentWillUpdate()

state or props 更新後re-render以前調用。
不能在這裏調用 setState，若是須要設置 state，應該在 componentWillReceiveProps() 中調用 setState().

 

　　6.componentDidUpdate

在組件更新以後立刻調用。在該鉤子函數內，你能夠：一、操做DOM；二、發起網絡請求

 

　　7.componentWillUnmount

在組件卸載和銷燬前調用。在該鉤子函數內能夠作一些清除工做，好比：一、取消定時器；二、取消網絡請求；三、綁定DOM事件。