React組件生命週期總結

react組件的生命週期大體分爲三種狀態

1. mounting  開始插入真實DOM 初始化render
2. updating   props 或者 state 更新以後組件的更新狀態 也就是render
3. unmounting 組件渲染結束，移處真實DOM

其中除了unmounting每一個狀態又有對應的will 和 did 方法共有5個函數。

1. componentWillMount
2. componentDidMount
3. componentWillUpdate
4. componentDidUpdate
5. componentWillUnmount

除此以外還有兩個特殊的方法shouldComponentUpdate(state或者props改變時會觸發的函數)以及componentWillReceiveProps（props改變會觸發的函數）

它們的執行順序分別是

初始化（init render）：

getDefaultProps => getInitalStates => componentWillMount => render => componentDidMount

props變化：

componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render =>componentDidUpdate

state變化：

shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate

這裏能夠看出，Props 比 State 的改變會有多出一個componentWillReceiveProps的回調方法