react生命周期的阶段有哪些

今天小编给大家分享一下react生命周期的阶段有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。 react生命周期分为3个阶段；分别是：1、创建阶段，也被称为初始化阶段，表示组件第一次在DOM树中进行渲染的过程；2、更新阶段，也叫存在阶段，表示组件被重新渲染的过程；3、卸载阶段，也叫销毁阶段，表示组件从DOM中删除的过程。本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。生命周期（Life Cycle）的概念应用很广泛，特别是在经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程跟Vu免费云主机域名e一样，React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程这里主要讲述react16.4之后的生命周期，可以分成三个阶段：创建阶段更新阶段卸载阶段创建阶段主要分成了以下几个生命周期方法：构造函数（不要问我为什么用中文，因为英文会被吞掉，太难了）getDerivedStateFromPropsrendercomponentDidMount构造函数实例过程中自动调用的方法，在方法内部通过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方法之后执行此方法多用于执行一些数据获取，事件监听等操作该阶段的函数主要为如下方法：getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdategetDerivedStateFromProps该方法介绍同上shouldComponentUpdate用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true执行时机：到新的props或者state时都会调用，通过返回true或者false告知组件更新与否一般情况，不建议在该周期方法中进行深层比较，会影响效率同时也不能调用setState，否则会导致无限循环调用更新render介绍如上getSnapshotBeforeUpdate该周期函数在render后执行，执行之时DOM元素还没有被更新该方法返回的一个Snapshot值，作为componentDidUpdate第三个参数传入此方法的目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态componentDidUpdate执行时机：组件更新结束后触发在该方法中，可以根据前后的props和state的变化做相应的操作，如获取数据，修改DOM样式等componentWillUnmount此方法用于组件卸载前，清理一些注册监听事件，或者取消订阅的网络请求等一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建以上就是“react生命周期的阶段有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。