- 生命周期：一個(gè) React 實(shí)例坚洽，從創(chuàng)建到銷毀的過(guò)程。在這個(gè)過(guò)程中 React 給我們提供了一些生命周期函數(shù)筛武，并且按序自動(dòng)調(diào)用瞄摊，我們可以通過(guò)重寫這些個(gè)方法，從而實(shí)現(xiàn)在每個(gè)不同的階段去做一些操作部蛇，例如，初始化 state、發(fā)送Ajax網(wǎng)絡(luò)請(qǐng)求稻艰，發(fā)布訂閱...
完整生命周期圖譜如下：
image.png
生命周期可大致分為三個(gè)部分：
掛載時(shí)
- 當(dāng)組件實(shí)例被創(chuàng)建并插入 DOM 中時(shí)，其生命周期調(diào)用順序如下：
constructor(props)
static getDerivedStateFromProps(props, state)
render()
componentDidMount()
constructor(props)
- 通過(guò)給
this.state賦值對(duì)象來(lái)初始化內(nèi)部 state - 為事件處理函數(shù)綁定實(shí)例*
static getDerivedStateFromProps(props, state)
- 在初始掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用; 返回一個(gè)對(duì)象來(lái)更新 state侈净，如果返回 null 則不更新
- 讓組件在 props 變化時(shí)更新 state
render()
- class 組件中唯一必須實(shí)現(xiàn)的方法
- 需要
return, return布爾類型或 null不渲染尊勿，通常 return 多個(gè)React 元素
componentDidMount()
- 組件掛載后（插入 DOM 樹中）立即調(diào)用
- 網(wǎng)絡(luò)請(qǐng)求, 添加訂閱
- 可以直接調(diào)用
setState()，它將觸發(fā)額外渲染畜侦，調(diào)用兩次render()元扔，謹(jǐn)慎使用，會(huì)導(dǎo)致性能問(wèn)題
更新時(shí)
- 當(dāng)組件的 props 或 state 發(fā)生變化時(shí)會(huì)觸發(fā)更新旋膳。組件更新的生命周期調(diào)用順序如下：
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)
static getDerivedStateFromProps(props, state)
- 同上澎语，一般不使用
shouldComponentUpdate(nextProps, nextState)
- 默認(rèn)返回true，首次渲染或使用 forceUpdate() 時(shí)不會(huì)調(diào)用該方法
- 返回false验懊，不會(huì)調(diào)用render() 和 componentDidUpdate()
- 僅作為性能優(yōu)化的方式擅羞，大多數(shù)情況不需要手動(dòng)編寫優(yōu)化，應(yīng)該遵循默認(rèn)行為义图，可以使用內(nèi)置的
PureComponent組件 - 可以將 this.props 與 nextProps 以及 this.state 與nextState 進(jìn)行比較减俏，并返回 false 以告知 React 可以跳過(guò)更新
render()
- 同上
getSnapshotBeforeUpdate(prevProps, prevState)
- 不常用，一般用來(lái)獲取組件在發(fā)生更改之前從 DOM 中捕獲一些信息（例如碱工，滾動(dòng)位置）
- 返回 snapshot 的值（或 null）并將作為參數(shù)傳遞給 componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
- 更新后會(huì)被立即調(diào)用娃承。首次渲染不會(huì)執(zhí)行此方法
- 可對(duì) DOM 進(jìn)行操作奏夫。也可以調(diào)用 setState()，網(wǎng)絡(luò)請(qǐng)求草慧，但它必須被包裹在一個(gè)
條件語(yǔ)件里桶蛔，對(duì)更新前后的props進(jìn)行了比較，否則會(huì)導(dǎo)致死循環(huán)漫谷，會(huì)導(dǎo)致額外的重新渲染仔雷，會(huì)影響組件性能
卸載時(shí)
- 當(dāng)組件從 DOM 中移除時(shí)會(huì)調(diào)用如下方法：
componentWillUnmount()
- 在組件卸載及銷毀之前直接調(diào)用
- 可清除 timer，清除在 componentDidMount() 中創(chuàng)建的訂閱等
