React v16.3前生命周期：

在聊React v16.3版本的生命周期更新之前，讓我們先來回顧一下老的生命周期，如下是React 生命周期一覽圖：

需要注意的幾點(diǎn)：

• shouldComponentUpdate在props和state更新時(shí)都會(huì)出發(fā)，返回true則繼續(xù)更新，返回false不更新，是可以提升應(yīng)用性能的生命周期函數(shù)；

• 在更新階段的幾個(gè)生命周期中不能用setState，(shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate)容易造成無限循環(huán)，除非通過某些判斷停下來；

React v16.3生命周期：

React v16.3 不是React的大版本更新，卻有了生命周期的大改動(dòng)，即新增了兩個(gè)生命周期：

• getDerivedStateFromProps

• getSnapshotBeforeUpdate

deprecate了三個(gè)生命周期（三個(gè)帶will的）：

• componentWillMount

• componentWillUpdate

• componentWillReceiveProps

變更緣由

原來（React v16.0前）的生命周期在React v16推出Fiber之后就不合適了，因?yàn)槿绻_啟async rendering，在render函數(shù)之前的所有函數(shù)，都有可能被執(zhí)行多次。

禁止不能用比勸導(dǎo)開發(fā)者不要這樣用的效果更好，所以除了shouldComponentUpdate，其他在render函數(shù)之前的所有函數(shù)（componentWillMount，componentWillReceiveProps，componentWillUpdate）都被getDerivedStateFromProps替代。

如果在v16.3后的版本使用三個(gè)被禁用的生命周期，在其前面需要加上UNSAFE__，而在v17版本有可能直接被干掉無法使用。

React v16.4生命周期：

16.3和16.4的生命周期一覽圖：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

相比之前的版本，修改了getDerivedStateFromProps，使其在props，state變化和forceUpdate時(shí)都更新，這樣這個(gè)生命周期理解起來更容易一些。

getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 會(huì)在調(diào)用 render 方法之前調(diào)用，并且在初始掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用。它應(yīng)返回一個(gè)對(duì)象來更新 state，如果返回 null 則不更新任何內(nèi)容。

我們知道getDerivedStateFromProps是一個(gè)靜態(tài)函數(shù)，在其中是無法訪問到組件實(shí)例的，也就是強(qiáng)制開發(fā)者在render之前只做無副作用的操作，而是根據(jù)props和state決定新的state，僅此而已。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如，滾動(dòng)位置）。此生命周期的任何返回值將作為參數(shù)傳遞給 componentDidUpdate(prevProps, prevState, snapshot)。

了解更多，請(qǐng)點(diǎn)擊：https://www.bilibili.com/video/BV15z4y1y7e7/

作者：變態(tài)的小水瓶
鏈接：https://juejin.cn/post/6911140987737735175
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。