这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
这篇笔记记录了React生命周期（新）的知识
一、本堂课重点内容
- React生命周期（新）
二、详细知识点介绍
1、新旧生命周期对比
- 新版本（17.x+）的React中，
componentWillMount()、componentWillReceiveProps()、componentWillUpdate()这三个钩子函数的函数名前面要加上UNSAFE_，可以记为：除了componentWillUnmount()之外，所有函数名中带"will"的钩子函数前面都必须加UNSAFE_ - 修改原因：React官方的说法是上面这三个函数作用不大，容易被误解和滥用，此外，React官方在探索异步渲染，这三个函数潜在的误用问题可能更大
- 与旧生命周期相比，新版本的React删除了
componentWillMount()、componentWillReceiveProps()、componentWillUpdate()这三个钩子函数，新增了getDerivedStateFromProps()和getSnapshotBeforeUpdate()这两个钩子函数 - 新生命周期流程图
2、getDerivedStateFromProps()
- 调用时必须作为类的静态方法
- 必须返回一个状态对象（state obj）或null
- 当该函数返回一个状态对象时，state的值完全取决于返回的值而不会发生任何变化
- 作用：此方法适用于某些罕见的用例，即 state 的值在任何时候都取决于 props
- 弊端：派生状态会导致代码冗余，并使组件难以维护。
3、getSnapshotBeforeUpdate()
- 必须返回一个快照值（snap value）或者null
componentDidUpdate(preProps, preState, snapValue)接收三个参数，第一个是旧的props，第二个是旧的state，第三个是getSnapshotBeforeUpdate()的返回值，即更新前获取的快照值- 一个例子
- 假如现在有一个做滚动条的需求，新闻框内有许多新闻，且新闻在不断增加
- 如果新闻
4、总结
-
重要的钩子
- render：初始化渲染或更新渲染调用
- componentDidMount：开启监听, 发送ajax请求
- componentWillUnmount：做一些收尾工作, 如: 清理定时器
-
即将废弃的勾子
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
三、实践练习例子
- 无
四、课后个人总结
- 重点还是掌握几个使用较多的钩子，新钩子使用并不是很多
