概述
今天學習react時候，借編寫這篇文章加深一下對react周期加深印象
Initialization階段
constructor()
constructor方法在組件建立前被調(diào)用。
??1、在這個方法里面，應該先調(diào)用super(props)，否則this.props就會未定義。
??2、這個方法的主要用途是，初始化props，state和綁定方法。
在 constructor() 函數(shù)中不要調(diào)用 setState() 方法。如果你的組件需要使用內(nèi)部 state，請直接在構(gòu)造函數(shù)中為 this.state 賦值初始 state：
constructor(props) {
super(props);
// 不要在這里調(diào)用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
Mounting階段
componentWillMount()
這個方法在render方法執(zhí)行前渲染，componentWillMount() 在掛載之前被調(diào)用。它在 render() 之前調(diào)用，因此在此方法中同步調(diào)用 setState() 不會觸發(fā)額外渲染。通常，我們建議使用 constructor() 來初始化 state。
避免在此方法中引入任何副作用或訂閱。如遇此種情況，請改用 componentDidMount()。
此方法是服務端渲染唯一會調(diào)用的生命周期函數(shù)。
此方法即將過時，項目中避免使用。
render()
當調(diào)用render的時候，組件會檢查props和state并返回下列類型中的一個：
- react元素。
- 字符串或者數(shù)字。
- Portals。
- null。(不渲染)
- Booleans。(不渲染)
- react.Fragment。
componentDidMount()
componentDidMount() 會在組件掛載后（插入 DOM 樹中）立即調(diào)用。依賴于 DOM 節(jié)點的初始化應該放在這里。如需通過網(wǎng)絡(luò)請求獲取數(shù)據(jù)，此處是實例化請求的好地方。
這個方法是比較適合添加訂閱的地方。如果添加了訂閱，請不要忘記在 componentWillUnmount() 里取消訂閱
你可以在 componentDidMount() 里可以直接調(diào)用 setState()。它將觸發(fā)額外渲染，但此渲染會發(fā)生在瀏覽器更新屏幕之前。如此保證了即使在 render() 兩次調(diào)用的情況下，用戶也不會看到中間狀態(tài)。請謹慎使用該模式，因為它會導致性能問題。通常，你應該在 constructor() 中初始化 state。
Updation階段
shouldComponentUpdate()
shouldComponentUpdate() 會在渲染執(zhí)行之前被調(diào)用。返回值默認為 true，返回 false，則不會調(diào)用componentWillUpdate(),render()，React 可能會將 shouldComponentUpdate 視為提示而不是嚴格的指令，并且，當返回 false 時，仍可能導致組件重新渲染。
此方法，大部分情況下組件可能都不需要它，僅作為性能優(yōu)化的方式而存在，例如阻止子組件每次都渲染。
UNSAFE_componentWillUpdate()
此生命周期之前名為 componentWillUpdate,當組件收到新的 props 或 state 時，會在渲染之前調(diào)用 UNSAFE_componentWillUpdate()。使用此作為在更新發(fā)生之前執(zhí)行準備更新的機會。初始渲染不會調(diào)用此方法.
此方法即將過時，項目中避免使用。
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate() 會在更新后會被立即調(diào)用。首次渲染不會執(zhí)行此方法。
當組件更新后，可以在此處對 DOM 進行操作。如果你對更新前后的 props 進行了比較，也可以選擇在此處進行網(wǎng)絡(luò)請求。（例如，當 props 未發(fā)生變化時，則不會執(zhí)行網(wǎng)絡(luò)請求）。
componentDidUpdate(prevProps) {
// 典型用法（不要忘記比較 props）：
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
你也可以在 componentDidUpdate() 中直接調(diào)用 setState()，但請注意它必須被包裹在一個條件語件里，正如上述的例子那樣進行處理，否則會導致死循環(huán)。
Unmounting
componentWillUnmount()
componentWillUnmount() 會在組件卸載及銷毀之前直接調(diào)用。在此方法中執(zhí)行必要的清理操作，例如，清除 timer，取消網(wǎng)絡(luò)請求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。
componentWillUnmount() 中不應調(diào)用 setState()，因為該組件將永遠不會重新渲染。組件實例卸載后，將永遠不會再掛載它。
總結(jié)
簡單記錄一下react的生命周期，有些過時的就沒做太多介紹，其實官網(wǎng)介紹的還是很清晰的，大家可以參考官網(wǎng)熟悉生命周期。
