前言
1、生命周期介绍
① 是什么？
组件从创建到挂载页面上运行，再到组件不用时卸载的过程，叫生命周期，只有类组件才有生命周期。
②作用
学习组件的生命周期，有助于理解组件的运行方式，完成更复杂的组件更能、分析组件错误原因等。
2、钩子函数介绍
① 是什么？
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。
②作用
为开发人员在不同阶段操作组件提供了时机。
生命周期的三个阶段
三阶段分为：创建时、更新时和卸载时。
👉点击此（生命周期结构图）
一、生命周期（旧）
1.初始化阶段(挂载阶段)
① constructor
Ⅰ、执行
组件实例被创建并初始化时触发
Ⅱ、能做什么
- 通过给 this.state 赋值对象来初始化内部 state。
- 为事件处理函数绑定实例
② componentWillMount
Ⅰ、执行
componentWillMount() 在挂载之前被调用。
Ⅱ、能做什么
用于准备渲染前的工作
③ render
Ⅰ、执行
根据组件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素结构
④ componentDidMount
Ⅰ、执行
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里
Ⅱ、能做什么
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅
2.更新阶段
① shouldComponentUpdate
Ⅰ、执行
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
Ⅱ、能做什么
根据shouldComponentUpdate的返回值，判断组件的输出是否受但钱state或peops更改影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下，应该遵循默认行为。
② componentWillUpdate
Ⅰ、执行
组件即将被重新渲染前触发
Ⅱ、能做什么
用于准备更新前的工作
③ render
Ⅰ、执行
根据组件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素结构
④ componentDidUpdate
Ⅰ、执行
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
Ⅱ、能做什么
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。
3.卸载阶段
① componentWillUnmount
Ⅰ、执行
componentWillUnmount() 会在组件卸载及销毁之前直接调用。
Ⅱ、能做什么
在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
二、生命周期（新）
1.初始化阶段(挂载阶段)
① constructor
Ⅰ、执行
组件实例被创建并初始化时触发
Ⅱ、能做什么
- 通过给 this.state 赋值对象来初始化内部 state。
- 为事件处理函数绑定实例
② getDerivedStateFromProps
Ⅰ、执行
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
Ⅱ、能做什么
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
③ render
Ⅰ、执行
根据组件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素结构
④ componentDidMount
Ⅰ、执行
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里
Ⅱ、能做什么
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅
2.更新阶段
① getDerivedStateFromProps
Ⅰ、执行
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
Ⅱ、能做什么
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
② shouldComponentUpdate
Ⅰ、执行
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
Ⅱ、能做什么
根据shouldComponentUpdate的返回值，判断组件的输出是否受但钱state或peops更改影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下，应该遵循默认行为。
③ render
Ⅰ、执行
根据组件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素结构
④ getSnapshotBeforeUpdate
Ⅰ、执行
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。
Ⅱ、能做什么
它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
⑤ componentDidUpdate
Ⅰ、执行
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
Ⅱ、能做什么
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。
3.卸载阶段
① componentWillUnmount
Ⅰ、执行
componentWillUnmount() 会在组件卸载及销毁之前直接调用。
Ⅱ、能做什么
在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
三、生命周期新旧整体图片
四、三个被遗弃的生命周期函数
以下生命周期方法标记为“过时”。这些方法任然有效，但不建议在新代码中使用它们。使用这被遗弃的生命周期需要在前面加上UNSAFE_，但是不加也没事（建议加上）。
1、UNSAFE_componentWillMount()
Ⅰ、执行
UNSAFE_componentWillMount() 是 React 组件生命周期中的一个方法，用于在组件挂载（即被渲染到 DOM 中）之前调用。
Ⅱ、能做什么
在组件更新之前执行一些操作。它接收两个参数：nextProps和nextState，分别表示组件即将更新的props和state。
2、UNSAFE_componentWillReceiveProps()
Ⅰ、执行
用于在组件接收新的props时触发。
Ⅱ、能做什么
允许组件根据即将接收到的新props进行一些操作，例如更新组件的状态或执行一些副作用操作。在这个方法中，可以比较当前props和即将接收到的props的差异，并根据需要进行相应的处理。
3、UNSAFE_componentWillMount()
Ⅰ、执行
当组件的props或state发生变化，并且在重新渲染之前，UNSAFE_componentWillUpdate()方法会被调用。
Ⅱ、能做什么
UNSAFE_componentWillUpdate()的作用是在组件更新之前执行一些操作。它接收两个参数：nextProps和nextState，分别表示组件即将更新的props和state。
五、新增的两个生命周期函数
1、getDerivedStateFromProps
执行：
static getDerivedStateFromProps(props, state)
在组件创建时和更新时的render方法之前调用。
作用：文章来源：https://www.toymoban.com/news/detail-680687.html
它应该返回一个对象来更新状态，或者返回null来不更新任何内容。
2、getSnapshotBeforeUpdate
执行：
getSnapshotBeforeUpdate()
被调用于render之后，可以读取但无法使用DOM的时候。
作用：
它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。文章来源地址https://www.toymoban.com/news/detail-680687.html
到了这里，关于React生命周期（新-旧）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
