随着前端技术的不断发展，生命周期 这个概念出现频次越来越高，几乎所有前端技术栈都有这个概念，当然React也不例外，这篇文章就准备聊聊在React的生命周期，废话不多说，开搞！
什么是生命周期
我们在学习任何一门技术前，我认为都应该先知道这门技术的 本质 是什么，它是用来 解决什么问题的，带着这样类似的思考再去学习新技术，我想这样才能更好地掌握技术的真谛，因此这一小节准备聊聊什么是生命周期，它用来干嘛的
在我看来，程序本身是 抽象的，如何能更好地去描述程序的运行过程呢？生命周期就是目前主流的方案，它可以具象化地描述程序运行过程中的 关键节点，每一个节点都对应着不同阶段，在这些不同的阶段内就可以因地制宜地去完成对应的行为，从而最终实现描述程序运行过程的目的。总结下来，我认为 生命周期是一种将程序运行过程具象化描述的方式，通过它可以让我们对程序能有更好的把控
在了解了生命周期的含义后，我们再实际看看React里设计了哪些生命周期吧~
React的生命周期有哪些
我们都知道React里，是有 class 和 hook 两种方式构建组件的，本文所涉及的生命周期api都是 class 组件里的，这点需要注意
总体上，生命周期分为三个阶段：
- 挂载
- 更新
- 卸载
接下来讲解这三个不同阶段分别有哪些生命周期，go，go，go！
挂载
在这个阶段内有如下的生命周期：
- constructor: 组件的构造函数，通常用来 初始化state和 绑定事件回调函数
- static getDerivedStateFromProps: 用来从props衍生出state属性，如果不需要，则返回null
- render: 用来返回组件渲染的内容，是唯一一个必须存在的方法
- UNSAFE_componentWillMount: 在组件挂载之前被调用，不要在这里进行有副作用的操作，目前已被废弃，不推荐使用，但它是服务端渲染唯一会调用的生命周期函数
- componentDidMount: 组件更新渲染完成后触发，可以在这里进行 数据的请求 或者 基于dom的操作
更新
在这个阶段内有如下的生命周期：
- static getDerivedStateFromProps: 同上，需要注意的是挂载与更新都会走这个钩子
- UNSAFE_componentWillReceiveProps: 会在已挂载的组件接收新的props之前被调用，目前已被废弃，不推荐使用
- shouldComponentUpdate: 用于控制组件是否重新渲染，默认返回true
- UNSAFE_componentWillUpdate: 当组件收到新的 props 或 state 时且shouldComponentUpdate返回true时会触发，目前已经废弃
- render: 同上
- getSnapshotBeforeUpdate: 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate
- componentDidUpdate: 组件重新渲染完成时触发，可以获取最新的 state 和 dom
卸载
在这个阶段内有如下的生命周期：
- componentWillUnmount: 会在组件卸载及销毁之前直接调用，通常用于清理操作
特殊的生命周期
除了上节讲到的常规生命周期，还有两个特殊的用于捕获错误的生命周期：
- getDerivedStateFromError：会在后代组件抛出错误后被调用，通常是在后代组件的生命周期或构造函数中抛出的，它将捕获的错误作为第一个参数，通常用于渲染降级UI
- componentDidCatch: 基本同上，唯一一个区别是会接受两个参数，第一个是抛出的错误，第二个是保存有错误信息的对象，通常用于记录错误日志
需要注意的是上述两个钩子都只能捕获后代组件发生的错误，组件本身的错误无法被捕获
结语
上述就是所有关于React生命周期相关的讲解了，希望你能收获满满哦~
