站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

react生命周期分为几个阶段

时间:2022-04-30 [网络编程]作者:fabuyuan 浏览:6 次

react生命周期分为3个阶段;分别是:1、创建阶段,也被称为初始化阶段,表示组件第一次在DOM树中进行渲染的过程;2、更新阶段,也叫存在阶段,表示组件被重新渲染的过程;3、卸载阶段,也叫销毁阶段,表示组件从DOM中删除的过程。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react生命周期分为几个阶段

生命周期(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视频教程

以上就是react生命周期分为几个阶段的详细内容,更多请关注站长家园其它相关文章!

本文标签:  React

转载请注明来源:react生命周期分为几个阶段

本文永久链接地址:https://www.adminjie.com/post/11852.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle横表怎么转纵表

      oracle横表怎么转纵表

      在oracle中,可以利用pivot()函数将横表转为纵表,该函数用于将行转为列,语法为“SELECT*FROM(数据查询集)PIVOT(SUM(行转列后...

    • oracle怎么去掉换行符

      oracle怎么去掉换行符

      方法:1、用replace,语法“replace(replace(列名,CHR(10),\'\'),chr(13),\'\')”;2、用translate,语法...

    • jquery是什么的一个类库

      jquery是什么的一个类库

      jquery是JavaScript封装的一个类库。jQuery是为了简化JS的开发或者DOM等操作而开发的一种类库;它封装了JS常用的功能代码(函数),提供一种...

    • oracle怎么删除session

      oracle怎么删除session

      删除session的方法:1、利用“v$session”视图,查看会话的sid和“serial#”;2、利用alter语句删除session即可,语法为“alt...

    • oracle怎么关闭em

      oracle怎么关闭em

      方法:1、用“emctlstatusdbconsole”查看em状态;2、用“emctlstopdbconsole”使em停止运行;3、用“emca-...

    热门文章