什么是生命周期
- 组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期；
- React 在组件的生命周期中提供了一系列的钩子函数 （类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行；
- 生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁；
旧版生命周期 VS 新版生命周期
| 阶段 | 生命周期（React < 16.0） | 生命周期（React >=16.4） |
|---|---|---|
| 装载阶段（Mount） | constructor() render() componentDidMount() |
constructor() getDerivedStateFromProps() render() componentDidMount() |
| 更新过程（Update） | shouldComponentUpdate() render() - componentDidUpdate() |
getDerivedStateFromProps() shouldComponentUpdate() - render() getSnapshotBeforeUpdate() componentDidUpdate() |
| 卸载过程（Unmount） | componentWillUnmount() | componentWillUnmount() |
旧版生命周期
| 钩子函数 | 描述 |
|---|---|
| constructor | 同一个组件对象只会创建一次, 不能在第一次挂载到页面之前调用 setState，为了避免问题， 构造函数中严禁使用 setState |
| 1. 正常情况下，和构造函数一样，它只会运行一次 2. 可以使用 setState，但是为了避免 bug，不允许使用，因为在某些特殊情况下，该函数可能 被调用多次 |
|
| render | 1. 返回一个虚拟 DOM，会被挂载到虚拟 DOM 树中，最终渲染到页面的真实 DOM 中 2. render 可能不只运行一次，只要需要重新渲染，就会重新运行 3. 严禁使用 setState，因为可能会导致无限递归渲染 |
| componentDidMount | 1. 只会执行一次 2. 可以使用 setState 3. 通常情况下，会将网络请求、启动计时器等一开始需要的操作，书写到该函数中 |
| 1. 即将接收新的属性值 2. 参数为新的属性对象 3. 该函数可能会导致一些 bug，所以不推荐使用 |
|
| shouldComponentUpdate(newProps, newState) | 1. 指示 React 是否要重新渲染该组件，通过返回 true 和 false 来指定 2. 默认情况下，会直接返回 true 3. 性能优化，可以避免不必要的渲染 |
| 组件即将被重新渲染 | |
| componentDidUpdate(prevProps, prevState) | 组件完成渲染，可以在该函数中操作 DOM 元素 |
| componentWillUnmount | 通常在该函数中销毁一些组件依赖的资源，比如计时器 |
新版生命周期
| 钩子函数 | 描述 |
|---|---|
| getDerivedStateFromProps(props, state) | 1. 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用 2. 该函数是静态的 3. 让组件在 props 变化时更新 state，返回值会覆盖掉组件状态 |
| getSnapshotBeforeUpdate(prevProps, prevState) | 1. 真实的 DOM 构建完成，但还未实际渲染到页面中 2. 在该函数中，通常用于实现一些附加的 DOM 操作 3. 该函数的返回值，会作为 componentDidUpdate 的第三个参数 |
打赏作者
您的打赏是我前进的动力
微信
支付宝
React✍️ 组件、组件状态
上一篇
评论
