實例化

首次實例化

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount 實例化之後更新，這一過程和上面一樣，但沒有getDefaultProps這個過程 簡單記憶：props => state => mount => render => mounted

存在期

組件已經存在，狀態發生改變時

• componetWillReceiveProps
• shouldComponentUpdate
• ComponentWillUpdate
• render
• componentDidUpdate

銷毀期

• componentWillUnmount

生命周期中10個API的作用說明

• getDefaultProps 作用於組件類，只調用一次，返回對象用於設置默認的props，對於引用值，會在實例中共享

• getInitialState 作用於組件實例，在實例創建時調用一次，用於初始化每個實例的state，此時可以訪問this.props

• componentWillMount 在完成首次渲染之前調用，此時可以修改組件的state

• render 必選方法，創建虛擬DOM，該方法具有特殊規則：

• 只能通過this.props 和this.state訪問數據

• 可以返回null、false或任何React組件

• 只能出現一個頂級組件，數組不可以

• 不能改變組件的狀

• 不能修改DOM

• componentDidMount 真實的DOM被渲染出來後調用，可以在此方法中通過 this.getDOMNode()訪問真實的DOM元素。此時可以使用其它類庫操作DOM。服務端不會被調用

• componetWillReceiveProps 組件在接收到新的props時調用，並將其作為參數nextProps使用，此時可以更改組件的props及state

• shouldComponentUpdate 組件是否應當渲染新的props或state，返回false表示跳過後續的生命周期方法，通常不需要使用以避免出現bug。在出現應用性能瓶頸時，是一個可以優化的點。

• componetWillUpdate 接收新props或state後，進行渲染之前調用，此時不允許更新props或state

• componetDidUpdate 完成渲染新的props或state之後調用 ，此時可以訪問DOM元素。

• componetWillUnmount 組件被移除之前調用，可以用於做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創建的定時器或添加的事件監聽器。

react 的 生命周期