React 生命週期

React 生命週期

生命週期圖解

初始階段

1. 設置默認屬性 (defaultProps), 設置屬性類型 (propTypes)
2. 初始化狀態 (state = {})
3. componentWillMount() -> 生命週期函數，在組件即將渲染前觸發，能夠作初始化數據顯示。(注意：這個方法已經被標爲不安全方法，官方不推薦使用)
4. render() -> 觸發了組件渲染
5. componentDidMount() -> 此時的組件已經生成了DOM結構，能夠進行有關操做。能夠使用此方法替換componentWillMount

運行時

1. componentWillReceiveProps() -> 當 props 發生變化的時候，也就是說父組件改變的時候會調用這個方法。可是注意的是，這個方法在初始化render的時候不會執行的
2. shouldComponentUpdate() -> 組件接收到新屬性時，或者組件狀態改變時候出發組件更新，在組件初始化渲染的時候不會觸發，這個函數能夠作爲優化組件性能的選擇。在react 項目中更新一個組件可能須要其父組件更新，可是一個父組件下可能還會有別的子組件，一旦父組件更新了狀態，那麼全部子組件都要執行 render 方法，這樣就太耗費性能了。因此能夠使用 shouldComponentUpdate() 方法判斷是否應該更新。其實你還能夠經過繼承 PureComponent 類，若是繼承了這個類，那麼在組件更新時候就會先去和以前的屬性判斷，從而判斷是否應該更新
3. componentWillUpdate() -> 組件即將被觸發更新
4. componentDidUpdate() -> 組件更新完成後生成新DOM

銷燬階段

1. componentWillUnmount() -> 這是在組件被銷燬時執行的方法。