当前位置: 首页 > news >正文

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>

 

相关文章:

react17:生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…...

腾讯内部单边拥塞算法BBR-TCPA一键脚本安装

TCPA简介 腾讯内部使用的TCPA&#xff0c;由腾讯TEG操作系统组研发&#xff0c;基于RHEL7.4源码&#xff0c;定制化的TCPA。团队介绍&#xff1a;腾讯TEG操作系统组, 2010年成立&#xff0c;专业的内核团队,维护研发腾讯内部linux操作系统tlinux, 保证百万级server高效稳定运行…...

【LLM】chatglm-6B模型训练和推理

本篇文章记录下 chatglm-6B 训练和推理过程 环境&#xff1a;Ubuntu 20.04 1.13.0cu116 chatglm-6B 源代码仓库&#xff1a;链接 chatglm-6B 模型权重&#xff1a;链接 源代码及模型 clone 到本地 这里使用的是 THUDM 在 hugging face 开源的模型。 因为模型比较大&#xff…...

性能可靠it监控系统,性能监控软件的获得来源有哪些

性能可靠的IT监控系统是企业IT运维的重要保障之一。以下是一个性能可靠的IT监控系统应该具备的特点&#xff1a; 高可用性 高可用性是IT监控系统的一个重要特点&#xff0c;它可以保证系统在24小时不间断监控的同时&#xff0c;保证系统服务的可用性和稳定性。为了实现高可用性…...

TCP/IP网络编程(一) 理解网络编程和套接字

文章目录 理解网络编程和套接字网络编程和套接字概要构建套接字编写 Hello World 服务器端构建请求连接套接字在Linux平台下运行 基于Linux的文件操作打开文件关闭文件将数据写入文件读取文件中的数据 理解网络编程和套接字 网络编程和套接字概要 网络编程就是编写程序使两台…...

Python 潮流周刊#18:Flask、Streamlit、Polars 的学习教程

你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。标题取自其中三则分享&#xff0c;不代表全部内容都是该主题&#xff0c;特此声明。 本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选…...

装备一台ubuntu

配置远程连接&#xff1a; ubuntu的root用户无法远程登入问题&#xff1a; openssh安装命令&#xff1a; sudo apt-get install openssh-server 安装完成通过以下命令查看SSH是否启动 ps -e | grep ssh 如果只有ssh-agent表示还没启动&#xff0c;需要&#xff1a; /etc/i…...

为了更好和大家交流,欢迎大家加我的微信账户

因为一些懂的都懂的原因&#xff0c;如果我的账户显示为 此时我无法通过站内信、留言或者任何方式和大家联系。 如果看到这样的内容&#xff0c;可以在此评论区留下你的微信账户&#xff0c;我看到后会添加你。为防止其他人冒充我&#xff0c;我的微信号以2206结尾。...

MS1826A HDMI 多功能视频处理器 HDMI4进1出画面分割芯片

基本介绍 MS1826A 是一款多功能视频处理器&#xff0c;包含 4 路独立 HDMI 音视频输入通道、1 路 HDMI 音视 频输出通道以及 1 路独立可配置为输入或者输出的 SPDIF、I2S 音频信号。支持 4 个独立的字库定 制型 OSD&#xff1b;可处理隔行和逐行视频或者图形输入信号&#xff1…...

最新文献怎么找|学术最新前沿文献哪里找

查找下载最新文献最好、最快、最省事的方法就是去收录该文献的官方数据库中下载。举例说明&#xff1a; 有位同学求助下载一篇2023年新文献&#xff0c;只有DOI号10.1038/s41586-023-06281-4&#xff0c;遇到这种情况可以在DOI号前加上http://doi.org/输入地址栏查询该文献的篇…...

ctfshow 红包题

前言&#xff1a; 最近一直在搞java很少刷题&#xff0c;看见ctfshow的活动赶紧来复现一波~ ctfshow 红包挑战7 <?php highlight_file(__FILE__); error_reporting(2); extract($_GET); ini_set($name,$value); system("ls ".filter($_GET[1])."" )…...

SpringBoot项目(jar)部署,启动脚本

需求 SpringBoot项目&#xff08;jar&#xff09;部署&#xff0c;需要先关闭原来启动的项目&#xff0c;再启动新的项目。直接输入命令&#xff0c;费时费力&#xff0c;还容易出错。所以&#xff0c;使用脚本启动。 脚本 脚本名&#xff1a;start.sh 此脚本需要放置在jar包…...

大数据(四)主流大数据技术

大数据&#xff08;四&#xff09;主流大数据技术 一、写在前面的话 To 那些被折磨打击的好女孩&#xff08;好男孩&#xff09;&#xff1a; 有些事情我们无法选择&#xff0c;也无法逃避伤害。 但请你在任何时候都记住&#xff1a; 你可能在一些人面前&#xff0c;一文不值&a…...

【已解决】激活虚拟环境报错:此时不应有Anaconda3\envs\[envs]\Library\ssl\cacert.pem。

新建虚拟环境后&#xff0c;进入虚拟环境的时候出现这样的报错&#xff1a; 此时不应有Anaconda3 envs yolov5 Library ssl cacert.pem。 但是之前装的虚拟环境也还能再次激活&#xff0c;base环境也无任何问题&#xff0c;仅新装的虚拟环境无法激活。 查遍了百度谷歌&#xff…...

Vue安装过程的困惑解答——nodejs和vue关系、webpack、vue-cli、vue的项目结构

文章目录 1、为什么在使用vue前要下载nodejs&#xff1f;2、为什么安装nodejs后就能使用NPM包管理工具&#xff1f;3、为什么是V8引擎并且使用C实现&#xff1f;4、为什么会安装淘宝镜像&#xff1f;5、什么是webpack模板&#xff1f;6、什么是脚手架 vue-cli&#xff1f;6.1 安…...

PWA ~

vite 安装&#xff1a; pnpm i vite-plugin-pwa -Dvite.config import { VitePWA } from vite-plugin-pwa export default defineConfig({plugins: [VitePWA()] })env.d.ts /// <reference types"vite-plugin-pwa/client" />打包构建&#xff1a;registerSW…...

YII项目在Docker中运行缓慢

缓慢问题分析 请求YII的api时间请求原生查询时间win10 上运行docker上的php api异常慢ubuntu 中拉代码git报错 请求YII的api时间 请求原生查询时间 win10 上运行docker上的php api异常慢 链接阿里数据的 入口直接返回的 网上有说是docker的dns解析慢&#xff1b; 也有说是…...

合宙Air724UG LuatOS-Air LVGL API控件--图表 (Chart)

图表 (Chart) 一幅图胜过一千个字&#xff0c;通过图表展示出的数据内容能让用户更快速有效的了解数据特征。 代码示例 – 创建图表 chart lvgl.chart_create(lvgl.scr_act(), nil) lvgl.obj_set_size(chart, 200, 150) lvgl.obj_align(chart, nil, lvgl.ALIGN_CENTER, 0, …...

Three.js之模型对象、材质

参考资料 三维向量Vector3与模型位置…克隆.clone()和复制.copy() 知识点 注&#xff1a;基于Three.jsv0.155.0 三维向量Vector3与模型位置欧拉Euler与角度属性.rotation模型材质颜色(Color对象)模型材质父类Material&#xff1a;透明、面属性模型材质和几何体属性克隆.clo…...

uniapp启动微信小程序开发者工具报错Enable IDE Service (y/N) 

下载安装好微信小程序开发者路径 配置好启动路径后 报错[微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C 解决办法 因为微信开发者工具的服务端口号没有打开...

Buzz:离线环境下音频转录与翻译的完整解决方案

Buzz&#xff1a;离线环境下音频转录与翻译的完整解决方案 【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Trending/buz/buzz 在当今信息驱动的工…...

珠海内有哪些做专精特新,创新型中小企业。权代理事务通过率高

在珠海&#xff0c;众多专精特新、创新型中小企业在发展过程中&#xff0c;知识产权代理事务变得尤为重要&#xff0c;而珠海飞拓知识产权代理事务凭借其独特优势&#xff0c;成为了高通过率的代表。企业痛点催生专业服务在专精特新、创新型中小企业培育与申报过程中&#xff0…...

OpenClaw初学者套装:Qwen3.5-9B镜像+5个基础技能

OpenClaw初学者套装&#xff1a;Qwen3.5-9B镜像5个基础技能 1. 为什么选择这个组合&#xff1f; 上周六下午&#xff0c;我盯着电脑里散落各处的会议纪要、参考文章和代码片段&#xff0c;突然意识到自己每天要重复几十次"CtrlF→切换窗口→复制粘贴"的操作。作为一…...

Java多线程实战:ReentrantLock与信号量Semaphore的5个高频使用场景解析

Java多线程实战&#xff1a;ReentrantLock与信号量Semaphore的5个高频使用场景解析 在Java并发编程领域&#xff0c;ReentrantLock和Semaphore是两个至关重要的同步工具。它们虽然都属于JUC&#xff08;java.util.concurrent&#xff09;包中的并发控制机制&#xff0c;但设计理…...

DOL-CHS-MODS整合包:从新手入门到定制开发的完整指南

DOL-CHS-MODS整合包&#xff1a;从新手入门到定制开发的完整指南 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS 一、需求定位&#xff1a;你属于哪种玩家类型&#xff1f; 场景描述 不同玩家对游…...

Agent在零售行业能解决哪些痛点?——深度解析零售企业智能自动化转型路径

在2026年零售行业加速迈向智能化的背景下&#xff0c;AI Agent&#xff08;人工智能智能体&#xff09;已不再仅仅是技术实验室的产物&#xff0c;而是演变为重构行业价值链的核心驱动力。传统的零售运营长期受困于人力密集型模式&#xff0c;面临着全球化运营复杂度高、数据孤…...

模拟前端电路设计:高精度信号处理核心技术解析

1. 模拟前端电路设计概述 模拟前端电路是连接真实世界与数字系统的关键桥梁&#xff0c;它负责将传感器采集的微弱模拟信号进行调理、放大和转换&#xff0c;使其能够被后续的数字系统正确处理。作为一名从事硬件设计十余年的工程师&#xff0c;我处理过从医疗设备到工业控制的…...

Phi-4-mini-reasoning推理模型5分钟快速上手:数学题逻辑题一键解答

Phi-4-mini-reasoning推理模型5分钟快速上手&#xff1a;数学题逻辑题一键解答 1. 为什么选择Phi-4-mini-reasoning&#xff1f; 如果你经常需要解决数学题、逻辑题或者需要一步步分析的问题&#xff0c;Phi-4-mini-reasoning就是为你量身定制的AI助手。这个模型不像那些通用…...

嵌入式开发必备:三大代码对比工具深度评测

1. 代码对比工具概述作为一名嵌入式开发工程师&#xff0c;我每天都要处理大量的代码修改和版本对比工作。在多年的开发实践中&#xff0c;我发现选择合适的代码对比工具能极大提升工作效率。虽然Beyond Compare是业内公认的标杆产品&#xff0c;但实际工作中我们还有更多选择&…...

别再混淆了!一文讲透NvDecoder里ulNumDecodeSurfaces和ulNumOutputSurfaces到底怎么用

深入解析NvDecoder&#xff1a;解码缓存与输出缓存的本质区别与实战配置 在视频处理领域&#xff0c;NVIDIA的硬件解码器&#xff08;NVDEC&#xff09;因其出色的性能和高效的资源利用率而广受开发者青睐。然而&#xff0c;对于许多中高级开发者来说&#xff0c;NvDecoder中ul…...