189 8069 5689
今天小编给大家分享一下react生命周期的阶段有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
目前创新互联已为上千家的企业提供了网站建设、域名、虚拟空间、绵阳服务器托管、企业网站设计、濮阳网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
react生命周期分为3个阶段；分别是：1、创建阶段，也被称为初始化阶段，表示组件第一次在DOM树中进行渲染的过程；2、更新阶段，也叫存在阶段，表示组件被重新渲染的过程；3、卸载阶段，也叫销毁阶段，表示组件从DOM中删除的过程。
本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。
生命周期（Life Cycle）的概念应用很广泛，特别是在经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程
跟Vue一样，React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
这里主要讲述react16.4之后的生命周期，可以分成三个阶段：
创建阶段
更新阶段
卸载阶段
创建阶段主要分成了以下几个生命周期方法：
构造函数（不要问我为什么用中文，因为英文会被吞掉，太难了）
getDerivedStateFromProps
render
componentDidMount
构造函数
实例过程中自动调用的方法，在方法内部通过super关键字获取来自父组件的props
在该方法中，通常的操作为初始化state状态或者在this上挂载方法
getDerivedStateFromProps
该方法是新增的生命周期方法，是一个静态的方法，因此不能访问到组件的实例
执行时机：组件创建和更新阶段，不论是props变化还是state变化，也会调用
在每次render方法前调用，第一个参数为即将更新的props，第二个参数为上一个状态的state，可以比较props 和 state来加一些限制条件，防止无用的state更新
该方法需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新
render
类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性
注意：不要在 render 里面 setState, 否则会触发死循环导致内存崩溃
componentDidMount
组件挂载到真实DOM节点后执行，其在render方法之后执行
此方法多用于执行一些数据获取，事件监听等操作
该阶段的函数主要为如下方法：
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
getDerivedStateFromProps
该方法介绍同上
shouldComponentUpdate
用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true
执行时机：到新的props或者state时都会调用，通过返回true或者false告知组件更新与否
一般情况，不建议在该周期方法中进行深层比较，会影响效率
同时也不能调用setState，否则会导致无限循环调用更新
render
介绍如上
getSnapshotBeforeUpdate
该周期函数在render后执行，执行之时DOM元素还没有被更新
该方法返回的一个Snapshot值，作为componentDidUpdate第三个参数传入
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('#enter getSnapshotBeforeUpdate');
return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('#enter componentDidUpdate snapshot = ', snapshot);
}此方法的目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态
componentDidUpdate
执行时机：组件更新结束后触发
在该方法中，可以根据前后的props和state的变化做相应的操作，如获取数据，修改DOM样式等
componentWillUnmount
此方法用于组件卸载前，清理一些注册监听事件，或者取消订阅的网络请求等
一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建
以上就是“react生命周期的阶段有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。