React state 更新时机

设置 state 只会为下一次渲染变更 state 的值
一个 state 变量的值永远不会在一次渲染的内部发生变化
React 会使 state 的值始终"固定"在一次渲染的各个事件处理函数内部
React 会等到事件处理函数中的所有代码都运行完毕再处理 state 更新

  1. 在一个函数中,多次设置state, 最终结果由最后一次决定
export default function Counter() {const [number, setNumber] = useState(0);return (<><h1>{number}</h1><button onClick={() => {// 第一次执行时,number为0setNumber(number + 1); // 相当于setNumber(0 + 1),React 准备在下一次渲染时将 number 更改为 1,React 将 “替换为 1” 添加到其队列中。setNumber(number + 1); // 相当于setNumber(0 + 1),React 准备在下一次渲染时将 number 更改为 1,React 将 “替换为 1” 添加到其队列中。setNumber(number + 1); // 相当于setNumber(0 + 1),React 准备在下一次渲染时将 number 更改为 1,React 将 “替换为 1” 添加到其队列中。// 执行结果 number = 1}}>+3</button></>)
}
  1. 即使事件处理函数的代码是异步的,它获取到的state也是与本次最初执行时的值保持一致的,state在一次执行时不会改变。
export default function Counter() {const [number, setNumber] = useState(0);return (<><h1>{number}</h1><button onClick={() => {setNumber(number + 5);setTimeout(() => {alert(number); // 0 在onClick执行时,number的值就被固定了。state 在“获取 UI 的快照”时就被“固定”了}, 3000);}}>+5</button></>)
}

如何在重新渲染前,多次更新同一个state

setNumber(n => n + 1)
通过传入一个更新函数 n=>n+1来更新state的值

export default function Counter() {const [number, setNumber] = useState(0);return (<><h1>{number}</h1><button onClick={() => {setNumber(n => n + 1); // n => n + 1 是一个函数。React 将它加入队列。setNumber(n => n + 1); // n => n + 1 是一个函数。React 将它加入队列。setNumber(n => n + 1); // n => n + 1 是一个函数。React 将它加入队列。}}>+3</button></>)
}

当在下次渲染期间调用 useState 时,React 会遍历队列。 之前的 state 的值是 0,所以这就是 React 作为参数 n 传递给第一个更新函数的值。然后 React 会获取上一个更新函数的返回值,并将其作为 n 传递给下一个更新函数,以此类推:

更新队列n返回值
n => n + 100 + 1 = 1
n => n + 111 + 1 = 2
n => n + 122 + 1 = 3

React 会保存 3 为最终结果并从 useState 中返回。

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

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

相关文章

HAL库--内存保护(MPU)实验

MPU是内核外设&#xff0c;想获取相关资料只能从内核手册查找 MPU功能仅F7/H7系列具备 内存保护单元(MPU介绍) MPU基本介绍 说白了MPU用来管理内存和外设存储区的访问权限 MPU可配置保护8/16个内存区域(看芯片型号)&#xff0c;每个区域最小要求256字节&#xff0c;且每个区…

2024年消防设施操作员考试题库及答案

一、单选题 31.工作时间是指劳动者根据国家的法律规定&#xff0c;在1个昼夜或1周之内从事本职工作的时间。《劳动法》规定劳动者每日工作时间不超过8h&#xff0c;平均每周工作时间不超过&#xff08;&#xff09;h。 A.44 B.45 C.46 D.50 答案&#xff1a;A 解析&…

STL入门指南:从容器到算法的完美结合

目录 ​编辑 一、什么是STL 二、STL的版本 三、STL的六大组件 1. 容器&#xff08;Containers&#xff09;&#xff1a; 2. 算法&#xff08;Algorithms&#xff09;&#xff1a; 3. 迭代器&#xff08;Iterators&#xff09;&#xff1a; 4. 仿函数&#xff08;Functo…

安鸾学院靶场——安全基础

文章目录 1、Burp抓包2、指纹识别3、压缩包解密4、Nginx整数溢出漏洞5、PHP代码基础6、linux基础命令7、Mysql数据库基础8、目录扫描9、端口扫描10、docker容器基础11、文件类型 1、Burp抓包 抓取http://47.100.220.113:8007/的返回包&#xff0c;可以拿到包含flag的txt文件。…

天降流量于雀巢?元老品牌如何创新营销策略焕新生

大家最近有看到“南京阿姨手冲咖啡”的视频吗&#xff1f;三条雀巢速溶咖啡入杯&#xff0c;当面加水手冲&#xff0c;十元一份售出&#xff0c;如此朴实的售卖方式迅速在网络上走红。而面对这一波天降的热度&#xff0c;雀巢咖啡迅速做出了回应&#xff0c;品牌组特地去到了阿…

计算机SCI期刊,中科院3区,IF=5.6,审稿速度非常快

一、期刊名称 International Journal of Machine Learning and Cybernetics 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;计算机科学 影响因子&#xff1a;5.6 中科院分区&#xff1a;3区 三、期刊征稿范围 控制论关注的是描述我们日常生活中无处不在…

说说你这个项目的架构情况吧?

说说你这个项目的架构情况吧&#xff1f; 从整体部署情况上&#xff0c;目前这个项目部署在两台服务器上&#xff0c;每台服务器部署一套应用在里面&#xff0c;如果某个服务挂了也不会影响到我们的整体的服务提供。当然&#xff0c;如果我们的服务器资源宽裕的话&#xff0c;可…

大数据安全经典面试题及回答(上)

目录 一、大数据安全的主要挑战及应对策略 二、大数据安全中的“五个V”及其影响 三、在Hadoop集群中实施数据加密的步骤和注意事项 四、在大数据环境中实施访问控制和身份认证 五、大数据环境中数据备份和恢复的策略 六、大数据处理过程中保护用户隐私的策略 七、大数据…

迅狐跨境商城系统|全平台兼容|前端采用uni-app跨端框架,后端采用ThinkPHP5框架

高效实现全平台兼容的迅狐跨境商城系统 迅狐跨境商城系统是一款专为跨境电商企业设计的全平台兼容系统。其前端采用uni-app跨端框架&#xff0c;后端采用ThinkPHP5框架&#xff0c;旨在实现高效的开发和运营管理。 1. 全平台兼容的前端设计 迅狐跨境商城系统的前端采用uni-a…

STM32开发过程中碰到的问题总结 - 1

文章目录 前言1. 怎么生成keil下可以使用的文件和gcc下编译使用的makefile2. STM32的时钟树3.怎么查看keil5下的编译工具链用的是哪个4. Arm编译工具链和GCC编译工具链有什么区别吗&#xff1f;5. 怎么查看Linux虚拟机是x86的还是aarch646. 怎么下载gcc-arm的编译工具链7.怎么修…

PlugLink:让数据分析与工作流无缝连接(附源码)

PlugLink&#xff1a;让数据分析与工作流无缝连接 引言 数据分析和自动化工作流已成为各个企业和个人提高效率的关键手段。今天&#xff0c;我要介绍一款名为PlugLink的工具&#xff0c;它不仅能帮助你轻松进行数据分析&#xff0c;还能将这些分析结果无缝连接到你的工作流中&…

基于 Python 解析 XML 文件并将数据存储到 MongoDB 数据库

1. 问题背景 在软件开发中&#xff0c;我们经常需要处理各种格式的数据。XML 是一种常用的数据交换格式&#xff0c;它可以存储和传输结构化数据。很多网站会提供 XML 格式的数据接口&#xff0c;以便其他系统可以方便地获取数据。 我们有这样一个需求&#xff1a;我们需要从…

Vue30-自定义指令:对象式

一、需求&#xff1a;创建fbind指定 要用js代码实现自动获取焦点的功能&#xff01; 二、实现 2-1、步骤一&#xff1a;绑定元素 2-2、步骤二&#xff1a;input元素获取焦点 此时&#xff0c;页面初始化的时候&#xff0c;input元素并没有获取焦点&#xff0c;点击按钮&…

NestJS学习笔记

一、安装NestJS CLI工具 环境检查 //查看node版本 node -v//查看npm版本 npm -v 安装nest/cli 使用npm全局安装nestjs/cli npm i -g nestjs/cli 查看nest版本 nest -v 结果如图&#xff1a; 创建nest项目 //命令行创建nest项目 nest new 【项目名】 VScode扩展下载 1、…

远程登录新建会话

在做远程登录会话建立的时候有时候会忘记顺便就记录了&#xff0c;方便后期回顾

没有登录微信就不会截图了?这个方法你一定要学会

前言 前段时间小白在指导小伙伴的时候&#xff0c;发现他在电脑没有登录微信的时候就不会截图了。 这个可就难倒他了…… 所以他登录了个微信&#xff0c;然后截了张图&#xff0c;接着把微信退出了。这人可真是谨慎啊&#xff5e; 所以&#xff0c;小伙伴在使用电脑的时候…

JWT工具【工具类】

一、JWT JSON Web Token (JWT)是一个开放标准&#xff08;RFC 7519&#xff09;&#xff0c;定义了一种紧凑且自包含的方式&#xff0c;以JSON对象的形式在各方之间安全地传输信息。这种信息可以被验证和信任&#xff0c;因为它是数字签名的。具体来说&#xff0c;JWT是一种用…

科技赋能,避震婴儿车或成为行业硬通货

全球知识经济发展发展到今天&#xff0c;消费者对于品质、服务、体验的要求越来越高&#xff0c;与之对应的产品也就越来越科技化、智能化、个性化&#xff0c;品牌化和差异化逐步成为产品的竞争核心。 婴儿推车作为关系婴幼儿出行安全的支柱性产业之一&#xff0c;从车架结构…

2.负载压力测试

负载压力测试是一种重要的系统测试方法&#xff0c;旨在评估系统在正常和峰值负载情况下的性能表现。 一、基本概念&#xff1a; 负载压力测试是在一定约束条件下&#xff0c;通过模拟实际用户访问系统的行为&#xff0c;来测试系统所能承受的并发用户数、运行时间、数据量等&…

编程前端看什么书比较好:深入解析与推荐

编程前端看什么书比较好&#xff1a;深入解析与推荐 在编程前端的学习道路上&#xff0c;书籍无疑是我们最宝贵的财富。一本好的书籍&#xff0c;不仅可以提供系统的知识体系&#xff0c;还能引导我们深入探索技术的奥秘。然而&#xff0c;面对市面上琳琅满目的前端书籍&#…