新項(xiàng)目用的React16.6, 遂整理一下新版本帶來的生命周期改變。
最大的改動(dòng)是生命周期去掉了三個(gè)
componentWillMount
componentWillReceiveProps
componentWillUpdate
并且加了兩個(gè)靜態(tài)方法
static getDerivedStateFromProps
getSnapshotBeforeUpdate
剛開始用的時(shí)候非常不習(xí)慣丢郊，不是很能理解為什么16里面React要把這三個(gè)生命周期方法干掉盔沫。專程google了一下：
React打算推出新的Async Rendering，提出一種可被打斷的生命周期枫匾，而可以被打斷的階段正是實(shí)際dom掛載之前的虛擬dom構(gòu)建階段架诞，也就是要被去掉的三個(gè)生命周期。生命周期一旦被打斷婿牍，下次恢復(fù)的時(shí)候又會(huì)再跑一次之前的生命周期侈贷，因此componentWillMount， componentWillReceiveProps等脂， componentWillUpdate都不能保證只在掛載/拿到props/狀態(tài)變化的時(shí)候刷新一次了俏蛮，所以這三個(gè)方法被標(biāo)記為不安全。而在整個(gè)16版本里都能無障礙的使用舊的這三個(gè)生命周期上遥，但值得注意的是搏屑，舊的生命周期（unsafe）不能和新的生命周期同時(shí)出現(xiàn)在一個(gè)組件，否則會(huì)報(bào)錯(cuò)“你使用了一個(gè)不安全的生命周期”粉楚。（引用自https://juejin.im/post/5aca20c96fb9a028d700e1ce）
我們可以看見除了shouldComponentUpdate辣恋，其他在render函數(shù)之前的所有函數(shù)（componentWillMount，componentWillReceiveProps模软，componentWillUpdate）都被getDerivedStateFromProps替代伟骨。我們?cè)趓ender之前的操作被限制在只能根據(jù)props和state的變化生成新的state。
getDerivedStateFromProps：
之前沒怎么關(guān)注這個(gè)文檔燃异，根據(jù)自己項(xiàng)目實(shí)踐中發(fā)現(xiàn)getDerivedStateFromProps無論是Mounting還是Updating都會(huì)被調(diào)用（在render之前）携狭。返回一個(gè)新對(duì)象來更新當(dāng)前的state或者返回null不改變state。
getSnapshotBeforeUpdate：
這個(gè)方法暫時(shí)還沒有實(shí)踐過回俐，從查到的文檔來看被調(diào)用于render之后逛腿。它使組件可以在可能更改之前從DOM捕獲一些信息（例如滾動(dòng)位置）。此生命周期返回的任何值都將作為參數(shù)傳遞給componentDidUpdate仅颇。
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('enter getSnapshotBeforeUpdate.....');
return 'I will see you in componentDidUpdate';
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('enter componentDidUpdate snapshot: ', snapshot);
// you will see 'I will see you in componentDidUpdate' in consolelog
}
componentDidCatch: 錯(cuò)誤handler
componentDidCatch(err, info)
React16提供了錯(cuò)誤處理的生命周期方法单默，在任何子組件渲染期間，生命周期方法中或者構(gòu)造函數(shù) constructor 發(fā)生錯(cuò)誤時(shí)調(diào)用忘瓦。但通過文檔來看componentDidCatch不會(huì)捕獲下面的錯(cuò)誤：
- 事件處理 (Event handlers) （因?yàn)槭录幚聿话l(fā)生在 React 渲染時(shí)搁廓，報(bào)錯(cuò)不影響渲染）
- 異步代碼 (Asynchronous code) (e.g. setTimeout or requestAnimationFrame callbacks)
- 服務(wù)端渲染 (SSR)
- 錯(cuò)誤邊界本身(而不是子組件)拋出的錯(cuò)誤
參考鳴謝
http://www.reibang.com/p/514fe21b9914
https://juejin.im/post/5aca20c96fb9a028d700e1ce
