react17:生命周期函数

  • 挂载时
  • 更新时
    • setState触发更新、父组件重新渲染时触发更新
    • forceUpdate触发更新
  • 卸载时

react(v17.0.2)的生命周期图谱如下。 

在这里插入图片描述 

 

相较于16版本,17版本生命周期函数有如下变化:

componentWillMount()
componentWillUpdate()
componentWillReceiveProps()
+getDerivedStateFromProps(props,state)
+getSnapshotBeforeUpdate(prevProps,prevState)
虽然UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps当前依然可用,但在react未来的版本中可能被移除,所以尽量避免使用。更多可以访问如下链接:

 https://react.docschina.org/docs/react-component.html。
https://react.docschina.org/blog/2018/03/27/update-on-async-rendering.html。

挂载时

组件挂载时,会依次调用如下生命周期函数:

  1. constructor(props)
  2. static getDerivedStateFromProps(props)
  3. render()
  4. componentDidMount()

 其中,getDerivedStateFromProps必须用static修饰,它是类上的方法。且必须返回null或者状态对象(State Obect)。

getDerivedStateFromProps在实际开发中几乎不用,仅适用于state唯一取决于props的场景。

 

更新时

setState触发更新、父组件重新渲染时触发更新

setState、父组件重新渲染触发更新时,会依次调用如下生命周期函数:

1、static getDerivedStateFromProps()
2、shouldComponentUpdate(nextProps,nextState)
3、render()
4、getSnapshotBeforeUpdate(prevProps,prevState)
5、componentDidUpdate(prevProps,prevState,snapshot)

其中,getSnapshotBeforeUpdate(prevProps,prevState)必须返回null或任意快照值(Snapshot Value,undefined除外)。返回的快照值将作为componentDidUpdate的第三个形参。

forceUpdate触发更新

forceUpdate触发更新,会依次调用以下生命周期函数:

  1. static getDerivedStateFromProps()
  2. render()
  3. getSnapshotBeforeUpdate()
  4. componentDidUpdate()

 

卸载时

组件卸载时,会调用生命周期函数:

  1. componentWillUnmount()

在这里插入图片描述

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head><body><div id="app"></div><script type="text/babel">class Count extends React.Component{constructor(props){console.log("Count---constructor");super(props);this.state = {count:0}}componentDidMount(){console.log("Count---componentDidMount");}static getDerivedStateFromProps(){console.log("Count---getDerivedStateFromProps");return null;}shouldComponentUpdate(){console.log("Count---shouldComponentUpdate");return true;}getSnapshotBeforeUpdate(){console.log("Count---getSnapshotBeforeUpdate");return null;}componentDidUpdate(){console.log("Count---componentDidUpdate");}componentWillUnmount(){console.log("Count---componentWillUnmount");}death = () => {ReactDOM.unmountComponentAtNode(document.getElementById("app"));}add = () => {const {count} = this.state;this.setState({count:count+1})}force = () => {this.forceUpdate();}render(){console.log("Count---render");const {count} = this.state;const {add,death,force} = this;return (<div><h2>当前值为:{count}</h2><button onClick={add}>点我加1</button>&nbsp;<button onClick={force}>强制更新</button>&nbsp;<button onClick={death}>卸载组件</button></div>)}}ReactDOM.render(<Count/>,document.getElementById("app"));</script>
</body></html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/63634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10.Redis 渐进式遍历

Redis 渐进式遍历 渐进式遍历scan 渐进式遍历 keys 命令一次性的把整个redis中所有的key都获取到&#xff0c;keys *但这个操作比较危险&#xff0c;可能会一下子得到太多的key,阻塞 redis 服务器。 通过渐进式遍历&#xff0c;就可以做到&#xff0c;既可以获取到所有的 key&…

认识SQL sever

目录 一、数据库的概念 1.1数据库的基本概念 1.2对数据库的了解 二、数据库的分类 2.1关系型数据库&#xff08;RDBMS&#xff09;&#xff1a; 2.2非关系型数据库&#xff08;NoSQL&#xff09;&#xff1a; 2.3混合数据库&#xff1a; 2.4数据仓库&#xff1a; 2.5嵌…

修改git文件

修改本地库的文件&#xff0c;体验git版本与版本穿梭 初始化git目录 git init 1.1、创建一个文件&#xff0c;并提交到本地本地库 echo "123" > hello.txt # 创建文件 git add hello.txt # 加入到暂存区 git commit -m "first commit" hello.txt #…

计算机毕设 基于生成对抗网络的照片上色动态算法设计与实现 - 深度学习 opencv python

文章目录 1 前言1 课题背景2 GAN(生成对抗网络)2.1 简介2.2 基本原理 3 DeOldify 框架4 First Order Motion Model5 最后 1 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要…

十、MySQL(DQL)条件查询

1、基础语法&#xff1a; select 字段列表 from 表名 where 条件列表; 2、实际操作&#xff1a; &#xff08;1&#xff09;初始化表格 &#xff08;2&#xff09;查询number大于444的员工 -- 查询number大于444的员工 select * from things where number>444; &#xff…

@Build注解有什么用?怎么用?

在Java中&#xff0c;Builder注解通常与项目构建工具Lombok一起使用&#xff0c;用于自动生成一个建造者&#xff08;Builder&#xff09;模式相关的代码&#xff0c;以简化对象的创建和初始化过程。 使用Builder注解的类会自动生成一个内部静态的建造者类&#xff0c;该建造者…

服务器卡顿怎么查找原因?

虽然服务器出现卡顿的现象比较少见&#xff0c;但也不排除出现的可能&#xff0c;而服务器一旦出现卡顿&#xff0c;造成的后果会严重的多。这里分享点笔记&#xff0c;希望有所帮助 1. 性能评估: 首先&#xff0c;对服务器的性能进行全面评估。检查 CPU 使用率、内存占用、磁…

Qt/C++编写视频监控系统81-Onvif报警抓图和录像并回放

一、前言 视频监控系统中的图文警情模块&#xff0c;是通过Onvif协议的事件订阅拿到的&#xff0c;通过事件订阅后&#xff0c;设备的各种报警事件比如入侵报警/遮挡报警/越界报警/开关量报警等&#xff0c;触发后都会主动往订阅者发送&#xff0c;而且一般都是会发送两次&…

WPF数据转换

在基本绑定中&#xff0c;信息从源到目标的传递过程中没有任何变化。这看起来是符合逻辑的&#xff0c;但我们并不总是希望出现这种行为。通常&#xff0c;数据源使用的是低级表达方式&#xff0c;我们可能不希望直接在用户界面使用这种低级表达方式。WPF提供了两个工具&#x…

excel绘制直方图

Excel 2016直方图使用指南 excel绘制各种曲线十分方便&#xff0c;可以通过代码将计算的数据输出到excel里面&#xff0c;然后通过excel的插入标签&#xff0c;绘制各种需要的曲线。 对于直方图&#xff0c;横坐标是分布区间&#xff0c;纵坐标是这个区间内数值的频数&#x…

Linux系统Ubuntu以非root用户身份操作Docker的方法

本文介绍在Linux操作系统Ubuntu版本中&#xff0c;通过配置&#xff0c;实现以非root用户身份&#xff0c;进行Docker各项操作的具体方法。 在文章Linux系统Ubuntu配置Docker详细流程&#xff08;https://blog.csdn.net/zhebushibiaoshifu/article/details/132612560&#xff0…

在服务器上搭建Jenkins

目录 1.服务器要求 2.官方文档 3.在服务器上下载Jenkins 3.1 下载war包 3.2 将war包上传到服务器的一个目录下 3.3 启动jenkins 3.3.1 jdk版本升级 1&#xff09;下载jdk17 2&#xff09;解压到当前文件夹 3&#xff09;配置路径 4.jenkins配置 4.1 填写初始密码&a…

listdir, makedirs, shuffle, exists, webdriver.Chrome, roll方法快速查阅

1 os.listdir() os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表。 2 os.makedirs(path) 方法用于递归创建目录。 如果子目录创建失败或者已经存在&#xff0c;会抛出一个 OSError 的异常 3 numpy.random.shuffle(x) 由numpy.random调用&#xff0c;可…

利用 AI 赋能云安全,亚马逊云科技的安全技术创新服务不断赋能开发者

文章分享自亚马逊云科技 Community Builder&#xff1a;李少奕 2023年6月14日&#xff0c;一年一度的亚马逊云科技 re:Inforce 全球大会在美国安纳海姆落下了帷幕。re:Inforce 是亚马逊云科技全球最大的盛会之一&#xff0c;汇集了来自全球各地的安全专家&#xff0c;共同学习、…

JVM 垃圾收集

垃圾收集 分代理论Java 堆的内存分区不同分代收集垃圾收集算法 分代理论 弱分代假说&#xff1a;绝大多数对象都是朝生夕灭&#xff0c;即绝大多数对象都是用完很快需要销毁的。强分代假说&#xff1a;熬过多次垃圾收集过程的对象就越难以消亡&#xff0c;即如果对象经过多次垃…

tomcat使用不同jdk的解决方法

1&#xff0c;修改bin文件夹下面的catalina.bat文件&#xff0c;把如下内容 rem ----- Execute The Requested Command --------------------------------------- echo Using CATALINA_BASE: %CATALINA_BASE% echo Using CATALINA_HOME: %CATALINA_HOME% echo Using CAT…

【Go 基础篇】Go语言结构体实例的创建详解

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;允许我们定义自己的复杂数据结构。通过结构体&#xff0c;我们可以将不同类型的数据字段组合成一个单一的实例&#xff0c;从而更好地组织和管理数据。然而&#xff0c;在创建结构体实例时&#xff0c;有一些注意…

[element-ui] el-tree 懒加载load

懒加载&#xff1a;点击节点时才进行该层数据的获取。 注意&#xff1a;使用了懒加载之后&#xff0c;一般情况下就可以不用绑定:data。 <el-tree :props"props" :load"loadNode" lazy></el-tree>懒加载—由于在点击节点时才进行该层数据的获取…

JVM第一篇 认识java虚拟机

目录 1. 什么是java虚拟机 2. java虚拟机分类 2.1. 商用虚拟机 2.2. 嵌入式虚拟机 3.java虚拟机架构 4.java虚拟机运行过程 1. 什么是java虚拟机 传统意义上的虚拟机是一种抽象化的计算机&#xff0c;通过在实际的计算机上仿真模拟各种计算机功能来实现的&#xff0c;是操…

jsch网页版ssh

使用依赖 implementation com.jcraft:jsch:0.1.55Server端代码 import com.jcraft.jsch.Channel; import com.jcraft.jsch.JSch; import com.jcraft.jsch.Session; import java.io.InputStream; import java.io.OutputStream; import java.util.concurrent.TimeUnit; import o…