React生命周期

2023-11-17

React生命周期

4个阶段:
1.挂载卸载过程(初始化)2. 更新过程 3. 销毁阶段 4. 错误处理阶段

  1. 挂载卸载过程(构建并插入真实DOM)
    1.1.constructor()
    1.2.componentWillMount()
    1.3.render()
    1.4.componentDidMount()
  2. 更新过程(更新数据重新渲染DOM)
    2.1. componentWillReceiveProps (nextProps)
    2.2.shouldComponentUpdate(nextProps,nextState)
    2.3.componentWillUpdate (nextProps,nextState)
    2.4.componentDidUpdate(prevProps,prevState)
    2.5.render()
  3. 销毁阶段(移除真实DOM)
    3.1. componentWillUnmount()
  4. 错误处理阶段(抓捕错误的生命周期)
    4.1. componentDidCatch()

1. 挂载卸载过程

1.1.constructor()
constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。
注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。
1.2.componentWillMount()
componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。
组件将要挂载到虚拟DOM之前执行
唯一一个可以同步修改state的生命周期函数
1.3.componentDidMount()
组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
渲染真实DOM
在此发送ajax请求
1.4.render()
生成虚拟DOM,此时并没有实际DOM

2. 更新过程

2.1. componentWillReceiveProps (nextProps)
在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props,将nextProps的state为当前组件的state,从而重新渲染组件
2.2.shouldComponentUpdate(nextProps,nextState)
主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断
2.3.componentWillUpdate (nextProps,nextState)
shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
2.4.componentDidUpdate(prevProps,prevState)
组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。
2.5.render()
render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,比较以后,找到最小的有差异的DOM节点,并重新渲染。

3. 销毁阶段

3.1.componentWillUnmount()
在此处完成组件的卸载和数据的销毁。
组件将要销毁
清理定时器,解绑事件

4. 销毁阶段

4.1. componentDidCatch()
抓捕错误的生命周期

3. React新增的生命周期

3.1. getDerivedStateFromProps(nextProps, prevState)
3.2. getSnapshotBeforeUpdate(prevProps, prevState)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React生命周期 的相关文章

  • 微信小程序怎么改变默认的打开页面?

    刚开始接触微信小程序 本来想要打开一个新页面而不是用原来的 这个页面 每次编译之后怎么才能让默认打开的页面不是这个页面而是我指定的页面呢 就去找到app json 把想指定的页面放到第一个 那么默认打开的首页就是你指定的页面了 这是来源于官

随机推荐

  • 两行Python代码调整视频的亮度

    老猿Python博文目录 一 引言 最近看到好几篇类似 n行Python代码 的博文 看起来还挺不错 简洁 实用 传播了知识 带来了阅读量 撩动了老猿的心 决定跟风一把 推一个 n行Python代码系列 文章 对于视频中的画面 有时出于特定
  • 【VPR】 Command-line - vpr的命令行选项(一)

    目录 一 基本用法 二 命令行详解 2 1 阶段选项 Stage Options 2 2 图形选项 Graphics Options 2 3 常规选项 General Options 2 4 文件名选项 Filename Options 2
  • RuntimeError: Attempting to deserialize object on a CUDA device but torch.cuda.is_available() is F..

    今天在HPC上跑的方法疯狂报错 RuntimeError Attempting to deserialize object on a CUDA device but torch cuda is available is False If y
  • System.IO.IOException: Sharing violation on pat

    System IO IOException Sharing violation on path E wang downloadmanage Assets download IEM2 apk at System IO FileStream c
  • 浅谈机器学习-回归与分类的区别

    前言 机器学习的主要任务便是聚焦于两个问题 分类和回归 本文将浅谈下两者的区别 区别 回归会给出一个具体的结果 例如房价的数据 根据位置 周边 配套等等这些维度 给出一个房价的预测 分类相信大家都不会陌生 生活中会见到很多的应用 比如垃圾邮
  • Spring Boot 2 全局异常处理

    1 创建 MyRestControllerAdvice 类 并添加 RestControllerAdvice import com tm common dto Rjson import com tm common exception Bus
  • Landsat9卫星简介

    1 landsat 9 先来介绍下2021年9月27日发射的landsat 9 目前已经采集了第一批影像 10月31日 1 携带的传感器 二代陆地成像仪Operational Land Imager 2 OLI 2 二代热红外传感器 TIR
  • C++11中thread_local的使用

    C 11中的thread local是C 存储期的一种 属于线程存储期 存储期定义C 程序中变量 函数的范围 可见性 和生命周期 C 程序中可用的存储期包括auto register static extern mutable和thread
  • 区块链的跨链技术介绍完整版

    如果说共识机制是区块链的灵魂核心 那么对于区块链特别是联盟链及私链来看 跨链技术就是实现价值网络的关键 它是把联盟链从分散单独的孤岛中拯救出来的良药 是区块链向外拓展和连接的桥梁 自比特币七年前诞生以来 数以百计的竞争币被开发出来 有着各种
  • 深入了解Aviator表达式引擎:高性能的轻量级计算引擎

    在软件开发过程中 我们经常需要对数学和逻辑表达式进行求值和计算 传统的方式可能会导致性能瓶颈和复杂的代码逻辑 在这篇博客中 我们将介绍Aviator表达式引擎 一个轻量级且高性能的计算引擎 用于解析和执行数学和逻辑表达式 什么是Aviato
  • 递归算法深入浅出三:递归求Fibonacci斐波那契数列

    递归算法概述及常见算法列表 传送门 http blog csdn net nthack5730 article details 65537530 斐波那契数列 斐波纳契数列 又称黄金分割数列 指的是这样一个数列 1 1 2 3 5 8 13
  • 如何获取Hive库表字段分区信息

    如何获取Hive库表字段分区信息 使用Hive关联的Mysql读取Hive的库表字段分区信息 也可以使用Hive的sys数据库查询相关的信息 但是会比较慢 所以直接使用Mysql去读 Hive在Mysql保存的信息如下图所示 获取Hive的
  • C语言-函数栈帧(每次调用函数,开辟函数的大概流程)

    思路 emm 有点懵 这一块 只知道个大概 如果后期我深挖的话 我再回头来补充 上图 括号的位置 便是每次创建 调用函数的时候 所产生的函数栈帧 也可以理解为每次调用函数 在电脑里开辟的一块空间 这空间实际就是一个栈 ebp栈底指针 esp
  • Ubuntu14.04 安装搜狗输入法

    Ubuntu14 04 安装搜狗输入法 一 安装fcitx 1 点击System Settings 2 选择Software Updates 3 点击Other Software 4 添加软件源 ppa fcitx team nightly
  • wpf 读取网络图片

    wpf读取网络图片 private void ViewImage string fileUri BitmapImage bitImage new BitmapImage bitImage BeginInit bitImage UriSour
  • 域名解析的过程

    互联网的域名解析不是靠一个DNS服务器完成的 而是分到多个DNS服务器上的 那么怎么分 net com edu 根 分别对应自己的服务器 根这个服务器虽然不负责具体的层级域名的解析 但是他知道 net com edu等是由哪些服务器解析的
  • 使用Visual Studio Team Explorer管理项目源代码

    最近参与了WPMind站长张欣发起的一个WP7开源项目 其中用到了Visual Studio Team Explorer进行源代码管理 以下是使用Visual Studio Team Explorer管理Codeplex上源代码的一些说明
  • 使用nginx部署项目

    开发工具 VScode 项目上线 部署项目 1 确保自己的代码是最新的 1 提交代码 git add git commit m 备注 git push git merge 分支名 git pull 2 确认是最新代码 2 VScode 1
  • python中遇见module ‘random‘ has no attribute ‘seed‘原因

    是因为我设置 py文件名为random与这个模块好像冲突 具体啥原因我也解释不清楚 修改文件名就可以了 import random random seed 10 print random random print random random
  • React生命周期

    React生命周期 4个阶段 1 挂载卸载过程 初始化 2 更新过程 3 销毁阶段 4 错误处理阶段 挂载卸载过程 构建并插入真实DOM 1 1 constructor 1 2 componentWillMount 1 3 render 1