react151618刷新几次的问题

结论:

16 hooks版本
默认render1次
同步中,无论多少种类还是次数,都render 1次。
异步中,无论多少种类还是次数,1个种类执行1次,多次的话,用n*2。
18 hooks版本
默认render2次,
同步中,无论多少种类还是次数,都render 2次。
异步中,无论多少种类还是次数,都render 2次。
15版本, class版本
this.setState是异步的,set 3次就会合并,在callback可以获取最新值
但是在setTimeout同步的。(set 3次就会执行三次)
15 class版本看这个地址

react18

import React, { useState, useEffect } from 'react';
// 最新的react 16
function Test() {console.log('----render') // 默认执行2次const [countA, setCountA] = useState(111);const [countB, setCountB] = useState(222);function onClick() {// 一个种类,一个set执行2次render// 二个种类,各一次set,那么执行2次render// 二个种类及以上,执行2次render,还是执行2次setCountA(countA + 1)// setCountA(countA + 1)// setCountA(countA + 1)// setCountA(countA + 1)// setCountB(countB + 1)// setCountB(countB + 1)// setCountB(countB + 1)// setCountB(countB + 1)setTimeout(() => {// 一个种类,一个set执行2次render// 二个种类,各一次set,那么执行2次render// 二个种类及以上,执行2次render,还是执行2次// setCountA(countA + 1)// setCountA(countA + 1)// setCountA(countA + 1)// setCountA(countA + 1)// setCountB(countB + 1)// setCountB(countB + 1)// setCountB(countB + 1)// setCountB(countB + 1)});}useEffect(() => {}, []);return (<div><p>{countA}-{countB}</p><button onClick={onClick}>点击我</button></div>)
}
export default Test;
react16
import React, { useState, useEffect } from 'react';
// 最新的react 16
function Test() {console.log('--render') // 默认执行1次const [countA, setCountA] = useState(111);const [countB, setCountB] = useState(222);function onClick() {// 一个种类,一个set执行1次render// 二个种类,各一次set,那么执行1次render// 二个种类及以上,执行2次render,还是执行1次// setCountA(countA + 1)// setCountA(countA + 1)// setCountA(countA + 1)// setCountA(countA + 1)// setCountB(countB + 1)// setCountB(countB + 1)// setCountB(countB + 1)// setCountB(countB + 1)setTimeout(() => {// 一个种类,一个set执行1次render// 二个种类,各一次set,那么执行2次render// 二个种类及以上n,执行2次render及以上,n*2setCountA(countA + 1)setCountA(countA + 1)setCountA(countA + 1)setCountA(countA + 1)setCountB(countB + 1)setCountB(countB + 1)setCountB(countB + 1)setCountB(countB + 1)});}useEffect(() => {}, []);return (<div><p>{countA}-{countB}</p><button onClick={onClick}>点击我</button></div>)
}
export default Test;
react16, 18
import React, { useState } from 'react';function App() {const [number, setNumber] = useState(0);function alertNumber() {setTimeout(() => {alert(number); // 操作步骤,先点击弹窗,然后快速+按钮,永远弹出的是0,16和18都这样子}, 3000);}return (<div className="App"><p>{number}</p><button onClick={() => setNumber(number + 1)}>+</button><button onClick={alertNumber}>alertNumber</button></div>);
}
export default App;

一下的以前的博客,不可靠

react刷新几次问题

15版本, class版本
this.setState是异步的,set 3次就会合并,在callback可以获取最新值
但是在setTimeout同步的。(set 3次就会执行三次)
15 class版本看这个地址
16版本,hooks版本
setState set几次就会render几次,但是有惰性。不会批处理。
18版本
批处理了。异步。可以调用同步的api。
setTimeout中的也可以批处理了。
legacy模式下:命中batchedUpdates时是异步 未命中batchedUpdates时是同步的
concurrent模式下:都是异步的,react 17添加了这个concurrent模式

react 16 setTimeout异步中的setA不可控制

useState会对state进行逐个处理,useState的原理是用闭包机制,而setTimeout中任务是无法拿到闭包中的变量的,所以,当遇到 setTimeout时,在setTimeout拿不到最新的值。
setState会进行一个合对象的,则只会处理最后一次。
当遇到 setTimeout/setInterval/Promise.then(fn)/fetch 回调/xhr 网络回调时,react 都是无法控制的,这个根react本身的原因有关系。
react 18 中对setTimeout中连续两次的setA也进行了合并,不知道18中setTimeout可不可以控制。

const [a, setA] = useState(123);
console.log('----render');
return (<div className="App"><h1>{a}</h1><button onClick={() => {// react 16 刷新两次, 结果仍然为124 react18刷新一次setA(a+1);setA(a+1);}}>fffff</button></div>
);
----------------------------------------
const [number,setNumber] = useState(0);
function alertNumber(){setTimeout(()=>{alert(number); // 不论您点击多少次下边的click这里就是0},3000);
}
return (<><p>{number}</p><button onClick={()=>setNumber(number+1)}>+</button><button onClick={alertNumber}>alertNumber</button></>
)
----------------------------------------
export default function App() {console.log('render----');const [ca, setCa] = useState(1);const aclick = () => {setTimeout(() => {// 会执行两次,但是最后的结果只会+1setCa(ca + 1);setCa(ca + 1);});}return (<div className="App" onClick={aclick}>{ca}</div>);
}

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

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

相关文章

Ubuntu 内核降级到指定版本

reference https://www.cnblogs.com/leebri/p/16786685.html 前往此网站&#xff0c;找到所需的内核 https://kernel.ubuntu.com/~kernel-ppa/mainline/ 查看系统架构 dpkg --print-architecture 二、下载安装包 注意&#xff1a;下载除lowlatency以外的deb包 三、安装内核 3…

JAVA基础(JAVA SE)学习笔记(八)面向对象编程(高级)

前言 1. 学习视频&#xff1a; 尚硅谷Java零基础全套视频教程(宋红康2023版&#xff0c;java入门自学必备)_哔哩哔哩_bilibili 2023最新Java学习路线 - 哔哩哔哩 第二阶段&#xff1a;Java面向对象编程 6.面向对象编程&#xff08;基础&#xff09; 7.面向对象编程&…

题目 1056: 二级C语言-温度转换(python详解)——练气四层初期

✨博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;算法修炼之练气篇&#xff08;C\C版&#xff09; &#x1f353;专栏&#xff1a;算法修炼之筑基篇&#xff08;C\C版&#xff09; &#x1f352;专栏&#xff1a;算法修炼之练气篇&#xff08;Python版&#xff09; ✨…

ubuntu18.04设置开机自动启动脚本(以自动启动odoo命令行为例讲解)

简介 ubuntu作为服务器使用时&#xff0c;常常需要在机器重启时能自动启动我们开发的服务。 Ubuntu 16.10开始不再使用initd管理系统&#xff0c;改用systemd&#xff0c;包括用systemctl命令来替换了service和chkconfig的功能。 systemd 默认读取 /etc/systemd/system 下的配…

单目3D目标检测 方法综述——直接回归方法、基于深度信息方法、基于点云信息方法

本文综合整理单目3D目标检测的方法模型&#xff0c;包括&#xff1a;基于几何约束的直接回归方法&#xff0c;基于深度信息的方法&#xff0c;基于点云信息的方法。万字长文&#xff0c;慢慢阅读~ 直接回归方法 涉及到模型包括&#xff1a;MonoCon、MonoDLE、MonoFlex、CUPNet…

buuctf_练[MRCTF2020]Ezaudit

[MRCTF2020]Ezaudit 掌握知识 ​ 网站源码泄露&#xff0c;代码审计&#xff0c;SQL注入的万能密码使用&#xff0c;mt_rand函数的伪随机数漏洞搭配php_mt_seed工具使用&#xff0c;随机数特征序列的生成 解题思路 打开题目链接&#xff0c;又发现是一个不错的网站界面&…

给你一个整数 num ,返回 num 中能整除 num 的数位的数目

给你一个整数 num &#xff0c;返回 num 中能整除 num 的数位的数目。 如果满足 nums % val 0 &#xff0c;则认为整数 val 可以整除 nums 。 示例 1&#xff1a; 输入&#xff1a;num 7 输出&#xff1a;1 解释&#xff1a;7 被自己整除&#xff0c;因此答案是 1 。 示例 2&…

Linux shell编程学习笔记16:bash中的关联数组

上一节我们探讨了普通的数组&#xff0c;即使用数字下标来索引数组中不同的元素的数组&#xff0c;也可以称之为索引数组。 相比纯粹的数字&#xff0c;字符串不仅能表明含义&#xff0c;也更便于记忆使用&#xff0c;于是就有了关联数组。 一、关联数组概述 bash 从4.0开始支…

竞赛 深度学习图像修复算法 - opencv python 机器视觉

文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步&#xff1a;将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…

基于 nodejs+vue旅游推荐系统 mysql

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

vscode markdown 使用技巧 -- 如何快速打出一个Tab 或多个空格

背景描述&#xff1a; 我在使用VSCode&#xff0c;这玩意很好用&#xff0c;但是&#xff0c;有一个缺点是&#xff0c;我想使用Tab来做一些对齐&#xff0c;但是我发现在VSCode中&#xff0c;无论是Tab还是多个空格&#xff0c;最终显示出来的都是一个空格 使用代码可以实现打…

【VUE】ElementPlus之动态主题色调切换(Vue3 + Element Plus+Scss + Pinia)

前言 关于ElementPlus的基础主题色自定义可以参阅《【VUE】ElementPlus之自定义主题样式和命名空间》 有了上面基础的了解&#xff0c;我们知道ElementPlus的主题色调是基于CSS3变量特性进行全局控制的&#xff0c; 那么接下来我们也基于CSS3变量来实现主题色调的动态切换效果&…

第一单元——概述

Blazor 的由来 Blazor 这个名字是两个单词改进而来的,即 Browser + Razor。从名字不难看出,它是基于 Razor 语法的浏览器框架。 Razor 语法的对于一直从事 ASP.NET 开发的小伙伴来说并不陌生,它从 .NET Framework 的 MVC 时代就开始伴随着我们一直前行,并且一直沿用到至今…

【原创】修复vCenter的Web界面无法启动的问题

零 出现的问题 在使用过程中&#xff0c;发现vCenter无法登录&#xff0c;报错。 因此重新启动vCenter&#xff0c;打开Web&#xff0c;先是报“no healthy upstream”&#xff0c;等了二十分钟后错误依旧。 再次重启vCenter&#xff0c;打开Web&#xff0c;还是报同样的错误。…

Linux - firewall-cmd 命令添加端口规则不生效排查

文章目录 linux 防火墙 firewall-cmd 命令详解问题排查 linux 防火墙 firewall-cmd 命令详解 基本语法 firewall-cmd --zonezone-name --add-serviceservice-name --permanent命令参数 --zone&#xff1a;指定要添加服务的区域名称。 --add-service&#xff1a;指定要添加的…

Apache ActiveMQ RCE漏洞复现(CNVD-2023-69477)

0x01 产品简介 ActiveMQ是一个开源的消息代理和集成模式服务器&#xff0c;它支持Java消息服务(JMS) API。它是Apache Software Foundation下的一个项目&#xff0c;用于实现消息中间件&#xff0c;帮助不同的应用程序或系统之间进行通信。 0x02 漏洞概述 Apache ActiveMQ 中存…

【概率论教程01】对贝叶斯定理的追忆

一、说明 贝叶斯定理&#xff0c;是一个需要反复体悟的道理&#xff0c;不是说公式解释清除就算Grasp&#xff0c;而是需要反复在实际项目中发挥&#xff0c;才能算掌握了。而实际应用中&#xff0c;并不是简单给出条件就可以套用&#xff0c;而是隐藏在迷雾一样的事实中&#…

基于Springboot自习预约管理系统

功能介绍&#xff1a; 基于Springboot自习预约管理系统。该系统为后台管理系统&#xff0c;无前台。主要角色有&#xff1a;管理员和学生。 主要功能&#xff1a; 学生信息管理&#xff1a;学号、姓名、专业、班级、年级、联系方式 教室信息管理&#xff1a;教室、教室号、楼…

利用Linux socat快速搭建TCP服务器

某些场合&#xff0c;需要在Linux上快速搭建一个TCP的服务器&#xff0c;接收客户端的连接&#xff0c;返回一些数据。 一般用于测试或者负载不大&#xff0c;安全性要求不高的场合&#xff0c;达到快速搭建的目的。 本文以客户端通过服务器的3334端口&#xff0c;获取服务器…

BIOS MBR UEFI GPT详解

先来看下名词 启动方式&#xff1a; Legacy&#xff1a;传统的。指的就是BIOS。 BIOS&#xff1a;Basic Input Output System&#xff0c;中文名称"基本输入输出系统"。 UEFI&#xff1a;Unified Extensible Firmware Interface&#xff0c;中文名称"统一的…