【react学习笔记】生命周期函数学习

学习视频地址：https://www.bilibili.com/video/BV1wy4y1D7JT?p=42

理解：

1. 组件从创建到死亡会经历一些特定的阶段
2. React组件仲包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用
3. 定义组件时会在特定的生命周期回调函数中做特定的工作

生命周期函数	描述
constructor	构造器
componentWillMount（已更名）	组件将要挂载（后续版本使用须加前缀UNSAFE_）
componentDidMount（常用）	组件挂载完毕（一般用作初始化，例如：开启定时器、发送网络请求、订阅消息）
render（必须使用）	初始化渲染、状态更新之后
componentWillReceiveProps（已更名）	组件将要接收props（后续版本使用须加前缀UNSAFE_）
shouldComponentUpdate	控制组件更新的阀门
componentWillUpdate（已更名）	组件将要更新（后续版本使用须加前缀UNSAFE_）
componentDidUpdate	组件更新完毕
componentWillUnmount（常用）	组件将要卸载 （一般用作收尾工作，例如：关闭定时器、取消订阅消息）

注意：上述更名的钩子函数有可能会被弃用，官方不推荐使用

生命周期流程图（旧）

生命周期的三个阶段（旧）

1. 初始化阶段：由ReactDom.render()出发----初次渲染

1）constructor()
2）componentWillMount()
3）render()
4）componentDidMount()

2. 更新阶段：由组件内部this.setState()或父组件重新render触发

1）shouldComponentUpdate()
2）componentWillUpdate()
3）render()
4）componentDidUpdate()

3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发

1）componentWillUnmount()

生命周期流程图（新）

新增生命周期函数	描述
getDerivedStateFromProps	该函数返回一个状态对象（此方法适用于罕见的用例，即state的值任何时候都取决于props）
getSnapshotBeforeUpdate	更新前获取快照，可获取更新前的props/state的值

新旧生命周期对比