React立即更新DOM

正常情况下,react会等待set完毕后再进行页面渲染,所以在set时无法拿到更新后的dom

import { useRef, useState } from "react"export default () => {const div = useRef(null)const [count, setCount] = useState(0)const btnClick = () => {setCount(count + 1)console.log(div.current.innerHTML)}return (<><div ref={div}>count:{count}</div><button onClick={btnClick}>+1</button></>)
}

在这里插入图片描述

但flushSync可以强制React同步刷新提供的回调中的任何更新,有点像Vue中的$nextTick

import { useRef, useState } from "react"
import { flushSync } from "react-dom"export default () => {const div = useRef(null)const [count, setCount] = useState(0)const btnClick = () => {flushSync(() => {setCount(count + 1)})console.log(div.current.innerHTML)}return (<><div ref={div}>count:{count}</div><button onClick={btnClick}>+1</button></>)
}

在这里插入图片描述
但是flashSync会丧失自动批处理(多次set只会重新渲染一次),非必要情况下,不太建议使用。

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

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

相关文章

各大期刊网址

AAAL: http://dblp.uni-trier.de/db/conf/aaai/ CVPR: http://dblp.uni-trier.de/db/conf/cvpr/ NeurlPS:http://dblp.uni-trier.de/db/conf/nips/ ICCV: http://dblp.uni-trier.de/db/conf/iccv/ IJCAL: http://dblp.uni-trier.de/db/conf/ijcal/ 并非原创引…

微机原理——定时器8253(8254)学习2应用与设计

目录 简要说明 用户扩展的定时计数器应用举例 1 8254作测量脉冲宽度 2 8254作定时 3 8254作分频 4 8254同时用作计数与定时 硬件设计 ​编辑软件设计 微机系统中定时计数器应用举例 5 计时器设计 硬件设计 软件设计 6 发生器设计 硬件设计 软件设计 简要说明 定…

LinuxBasicsForHackers笔记 --网络分析和管理

使用 ifconfig 分析网络 ifconfig – ifconfig 命令是用于检查活动网络接口并与之交互的最基本工具之一。只需在终端中输入 ifconfig 即可使用它来查询当前活动的网络连接。命令输出的顶部是第一个检测到的接口的名称。第二行包含当前分配给该网络接口的 IP 地址的信息&#x…

网上商城、宠物商城源码(Java)

javaWebjsp网上书城以及宠物商城源码&#xff0c;功能有购物车、收藏以及下单等等功能 带后台管理功能 运行示意图&#xff1a;

iOS 自动签名打包,并用脚本上传appstore

背景&#xff1a; 1&#xff09;测试环境给测试&#xff0c;产品&#xff0c;或者其他业务人员打测试包时&#xff0c;经常存在需要添加设备&#xff0c;不得不重新生成描述文件&#xff0c;手动去更新打包机描述文件配置 2&#xff09;证书&#xff0c;描述文件过期造成打包失…

STM32-SPI 中断

SPI协议 1.1 SPI总线介绍 SPI接口是Motorola &#xff08;motorola | Smartphones, Accessories & Smart Home Devices&#xff09;首先提出的全双工三线/四线同步串行外围接口采用主从模式&#xff08;Master Slave&#xff09;架构。 时钟由Master控制&#xff0c;在时钟…

华三知识点总结(完成中)

计算机网络概述 星型拓扑易于维护 在星型拓扑中&#xff0c;某条线路的故障不影响其它线路下的计算机通信 电路交换: 优点 延迟小&#xff0c;透明传输 缺点 固定带宽&#xff0c;网络资源利用率低 分组交换&#xff1a;优点 多路复用&#xff0c;网络资源利用率高 缺点&#x…

垃圾回收与内存泄漏

前端面试大全JavaScript垃圾回收与内存泄漏 &#x1f31f;经典真题 &#x1f31f;什么是内存泄露 &#x1f31f;JavaScript 中的垃圾回收 &#x1f31f;标记清除 &#x1f31f;引用计数 &#x1f31f;真题解答 &#x1f31f;总结 &#x1f31f;经典真题 请介绍一下 Jav…

P7 链表 链表头前方插入新节点

目录 前言 01 链表头插入数据 示例代码 02 指定节点前方插入新节点 测试代码 前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C》✨✨✨ &#x1f525; 推荐专栏2: 《 Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨…

关于数据劫持原理(vue2和vue3)

数据劫持&#xff0c;指的是在访问或者修改对象的某个属性时&#xff0c;通过一段代码拦截这个行为&#xff0c;进行额外的操作或者修改返回结果。 Object.defineProperty const user {username: xiaoming,age: 10 } let username user.username Object.defineProperty(use…

Web前端JS如何获取 Video/Audio 视音频声道(左右声道|多声道)、视音频轨道、音频流数据

写在前面&#xff1a; 根据Web项目开发需求&#xff0c;需要在H5页面中&#xff0c;通过点击视频列表页中的任意视频进入视频详情页&#xff0c;然后根据视频的链接地址&#xff0c;主要是 .mp4 文件格式&#xff0c;在进行播放时实时的显示该视频的音频轨道情况&#xff0c;并…

史上最全低代码平台盘点!三分钟盘点2023年顶尖二十个低代码平台!

史上最全低代码平台盘点&#xff01;三分钟盘点2023年顶尖二十个低代码平台&#xff01; 什么是低代码平台&#xff1f;2023年顶尖二十大低代码平台&#xff0c;哪个值得一试&#xff1f;低代码平台应该如何选择&#xff1f;本篇&#xff0c;我们将为大家盘点顶尖的十大低代码平…

分享一个简单的基于C语言嵌入式GUI界面切换代码

目录 前言 一、数据类型 二、页面调度 三、页面显示 四、视频展示 前言 最近在用LVGL写一个简单的UI界面&#xff0c;需要进行几个页面的切换&#xff0c;所以就自己写了一个简单页面切换代码&#xff0c;方便进行页面切换&#xff0c;同时使UI代码结构更加清晰。这个结构…

非常好的简历精选7篇

想要打造一份令人眼前一亮的简历&#xff0c;赢得招聘方的青睐&#xff1f;参考这7篇精选的“非常好的简历”案例&#xff01;无论是应届毕业生还是职场人士&#xff0c;都能从中借鉴灵感&#xff0c;提升简历质量。让求职之路更加顺畅&#xff0c;轻松斩获心仪职位&#xff01…

【java毕业设计源码】基于SSM框架的在线智能题库管理系统设计与实现

该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等学习内容。 目录 一、项目介绍&#xff1a; 二、文档学习资料&#xff1a; 三、模块截图&#xff1a; 四、开发技术与运行环境&#xff1a; 五、代码展示&#xff1a; 六、数据库表截图&#xff1a…

ABAP MODIFY 如何使用?有哪些细节需要注意?

MOIDFY 描述 在ABAP中的MODIFY是一个关键字&#xff0c;它可用于更新内表的数据。也可以用于更新数据库表的数据。这在SAP系统的编程中非常有用。 如何使用 MODIFY可以有两种形式&#xff1a;MODIFY TABLE和MODIFY LINE。 1. MODIFY TABLE&#xff1a;(用于修改数据库表、透…

智能优化算法应用:基于入侵杂草算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于入侵杂草算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于入侵杂草算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.入侵杂草算法4.实验参数设定5.算法结果6.参考…

c# OpenCV安装(一)

一 通过NuGet 安装四个拓展包 OpenCvSharp4、OpenCvSharp4.Extensions、OpenCvSharp4.runtime.win、OpenCvSharp4.WpfExtensions C#使用OpenCV的一些代码 需要加头文件 using OpenCvSharp; //为了使用opencv using Point OpenCvSharp.Point; //为了确定我们使用的poin…

296_C++_一个dialog对话框在执行exec向系统发送一个延后销毁事件时,另一个对话框立刻接管了上一个对话框的销毁事件,导致死UI

1、根因分析 -根因分析:当有新版本并且grade等级是2的时候,点击ptz的时候使用的是RSDialog,WA_DeleteOnClose属性默认是为true的, 并且是栈上的变量,当关闭ptz的时候,diolog的exec结束会向系统发送延后销毁事件,此时退出ptz会弹出自动升级对话框,接管了 事件循环,则会调用前面…

Android HCI日志分析案例1

案例1--蓝牙扫描设备过程分析 应用层发起搜索蓝牙设备&#xff0c;Android 官方提供的蓝牙扫描方式有三种&#xff0c;分别如下&#xff1a; BluetoothAdapter.startDiscovery(); //可以扫描经典蓝牙和BLE两种。BluetoothAdapter.startLeScan();//扫描低功耗蓝牙&#xff0c;…