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

1.react useState使用与常见问题

news 2026/5/28 23:20:22

文章目录

    • 0. 取消批处理合并更新, render 2次
    • 1. 合并更新,setCount(异步更新) 3次相当于1次, count值为1
    • 2. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为3
    • 3. 异步更新,获取异步更新的值?useEffect
    • 4.利用扩展运算符的形式来解决对象修改的问题
    • 5. 初始值大量计算,优化
    • 小结

用于为函数组件引入状态

<!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>Document</title><style></style><script src="../react.development.js"></script><script src="../react-dom.development.js"></script><script src="../babel.min.js"></script><script src="../lodash.min.js"></script>
</head><body><div id="app"></div><script type="text/babel">let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { flushSync } = ReactDOM;let { useState, useEffect } = React;let Welcome = (props)=>{const initCount = () => {console.log('initCount');return 2*2*2;}// 5. 初始需要大量计算的情况，可以写一个回调函数，这样可以惰性加载函数，只让函数调用一次const [count, setCount] = useState(()=>{return initCount();});const [msg, setMsg] = useState('hello');// 4.利用扩展运算符的形式来解决对象修改的问题// const [info, setInfo] = useState({//   username: 'xiaoming',//   age: 20// })// setInfo({//   ...info,//   username: 'xiaoqiang'// })const handleClick = () => {//0. 取消批处理合并更新, render 2次// flushSync(()=>{//   setCount(count + 1)// })// flushSync(()=>{//   setMsg('hi')// })// 1. 合并更新,setCount(异步更新) 3次相当于1次, count值为1// setCount(count + 1)// setCount(count + 1)// setCount(count + 1)// 2. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次  count值为3// setCount((count)=> count+1)// setCount((count)=> count+1)// setCount((count)=> count+1)// 3. 异步更新,获取异步更新的值?// 在setCount执行后,直接获取值,发现是更新前的值.如何修复?// 在类组件中,是通过setState,的第二个参数,在回调函数中获取同步数据// 函数组件中useState,没有第二个参数获取这个同步更新的值,   需要使用useEffect,监听,获取同步更新的值// 既然要进行自动批处理操作，所以函数是异步的// useState()：对应响应式数据的修改函数是没有第二个参数的，所以要监听数据改变后的时机，在函数组件中是通过 useEffect() 来实现的// setCount(count + 1, ()=>{   // ✖//   console.log(count)// })}console.log(123);return (<div><button onClick={handleClick}>点击</button><div>hello world, { count }, { msg }</div></div>);}let element = (<Welcome />);root.render(element)</script>
</body></html>

0. 取消批处理合并更新, render 2次

    // flushSync(()=>{//   setCount(count + 1)// })// flushSync(()=>{//   setMsg('hi')// })

1. 合并更新,setCount(异步更新) 3次相当于1次, count值为1

    // setCount(count + 1)// setCount(count + 1)// setCount(count + 1)

2. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为3

    // setCount((count)=> count+1)// setCount((count)=> count+1)// setCount((count)=> count+1)

3. 异步更新,获取异步更新的值?useEffect

用useEffect监听同步
// 在setCount执行后,直接获取值,发现是更新前的值.如何修复?

    // 在类组件中,是通过setState,的第二个参数,在回调函数中获取同步数据// 函数组件中useState,没有第二个参数获取这个同步更新的值,   需要使用useEffect,监听,获取同步更新的值// 既然要进行自动批处理操作，所以函数是异步的// useState()：对应响应式数据的修改函数是没有第二个参数的，所以要监听数据改变后的时机，在函数组件中是通过 useEffect() 来实现的// setCount(count + 1, ()=>{   // ✖//   console.log(count)// })

4.利用扩展运算符的形式来解决对象修改的问题

  // const [info, setInfo] = useState({//   username: 'xiaoming',//   age: 20// })// setInfo({//   ...info,//   username: 'xiaoqiang'// })

5. 初始值大量计算,优化

初始需要大量计算的情况，可以写一个回调函数，这样可以惰性加载函数，只让函数调用一次

  const [count, setCount] = useState(()=>{return initCount();});const [msg, setMsg] = useState('hello');

小结

讨论了下useState会遇到的一些问题,与优化技巧

相关文章：

1.react useState使用与常见问题

文章目录 0. 取消批处理合并更新, render 2次1. 合并更新,setCount(异步更新) 3次相当于1次, count值为12. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为33. 异步更新,获取异步更新的值?useEffect4.利用扩展运算符的形式来解决对象…...

编程日记 2023/7/27 19:19:13

LLaMA2可商用|GPT-4变笨|【2023-0723】【第七期】

一、大咖观点&#xff1a; 傅盛&#xff1a;ChatGPT时代如何创业 - BOTAI - 博客园Google 已经被OpenAI 超越了吗&#xff1f;| AlphaGo 之父深度访谈《人民日报》&#xff1a;大模型的竞争&#xff0c;是国家科技战略的竞争WAIC 2023 | 张俊林&#xff1a;大语言模型带来的交…...

编程日记 2023/7/27 19:18:12

[SQL系列] 从头开始学PostgreSQL 自增 权限和时间

[SQL系列] 从头开始学PostgreSQL 事务 锁 子查询_Edward.W的博客-CSDN博客https://blog.csdn.net/u013379032/article/details/131841058上一篇介绍了事务&#xff0c;锁&#xff0c;子查询 事务有点像是原子操作&#xff0c;需要有完整性&#xff0c;要么全都完成了&#xff…...

编程日记 2023/7/27 19:17:10

【云原生】Kubernetes之Secret

使用 kubectl 管理 Secret 准备开始 你必须拥有一个 Kubernetes 的集群&#xff0c;同时你必须配置 kubectl 命令行工具与你的集群通信 创建 Secret Secret 对象用来存储敏感数据&#xff0c;如 Pod 用于访问服务的凭据。例如&#xff0c;为访问数据库&#xff0c;你可能需…...

编程日记 2023/7/27 19:16:09

细说小程序底部标签---【浅入深出系列006】

微信目录集链接在此&#xff1a; 详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰ 不会导入/打开小程序的看这里&#xff1a;参考 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择 学习语法的前…...

编程日记 2023/7/27 19:15:08

【VUE】使用elementUI上传组件-提示不存在

使用elementUI上传组件上传图片后&#xff0c;表单验证还是提示不存在 主要是因为组件包的层级比较深&#xff0c;验证取不到值导致 可以通过绑定其他元素获取到值进行验证 比如增加el-checkbox-group元素&#xff0c;将值绑定到它上面 <el-form :model"Form" …...

编程日记 2023/7/27 19:14:06

Flutter Windows通过嵌入Native窗口实现渲染视频

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频&#xff08;本章&#xff09; 文章目录 Flutter视频渲染系列前言…...

编程日记 2023/7/27 19:13:05

MySQL学习笔记 ------ 库和表的管理

#DDL /* 数据定义语言 库和表的管理 一、库的管理 创建、修改、删除 二、表的管理 创建、修改、删除 创建&#xff1a; create 修改&#xff1a; alter 删除&#xff1a; drop */ #一、库的管理 #1、库的创建 /* 语法&#xff1a; create database [if not exists]库名;…...

编程日记 2023/7/27 19:12:04

python中去除字符串中指定的字符

去除字符串中特定字符&#xff08;但是只能删除头、尾指定字符&#xff09;&#xff1a; a 你好\n我是xx。\n\n\n print(a.strip(\n))# 你好 # 我是xx。 去除中间字符&#xff0c;可使用replace()函数&#xff1a; a 你好\n我是xx。\n\n\n print(a.replace(\n, ))# 你好我…...

编程日记 2023/7/27 19:11:03

Java实现商品ID获取京东商品详情Desc商品描述数据方法

要通过京东的API获取商品详情商品描述&#xff0c;您可以使用京东开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过京东开放平台API获取商品详情&#xff1a; 首先&#xff0c;确保您已注册成为京东开放平台的开发者&#xff0c;并创…...

编程日记 2023/7/27 19:10:02

1-高性能计算研究

高性能计算研究 E级计算机系统研制高性能计算应用软件研发并行编程框架应用协同开发优化平台和工具软件示例 高性能计算环境研发 E级计算机系统研制 高性能互联计算、编程、运行模型 应用驱动的新型可扩展基础算法&#xff08;适用于E级计算的可计算物理建模与新型计算方法&a…...

编程日记 2023/7/27 19:09:01

swagger快速升级方案

背景 在使用SpringBoot 2.6以前去创建API文档工具一般会采用SpringFox提供的Swagger库&#xff0c;但是由于SpringBoot版本的不断升级和SpringFox摆烂不更新&#xff0c;导致了SpringBoot2.6之后的项目无法使用SpringFox去生成API文档&#xff0c;或者可以使用但是有很多的bug…...

编程日记 2023/7/27 19:08:00

sql中with as用法/with-as 性能调优/with用法

文章目录 一、概述二、基本语法三、使用场景3.1、定义CTE,并为每列重命名3.2、多次引用/多次定义3.3、with与union all联合使用3.4、with返回多种结果的值3.5、with与insert使用 四、递归查询4.1、语法4.2、使用场景4.2.1、用with递归构造1-10的数据4.2.2、with与insert递归造数…...

编程日记 2023/7/27 19:06:59

大数据课程C5——ZooKeeper的应用组件

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 掌握Zookeeper的Canal消费组件&#xff1b; ⚪ 掌握Zookeeper的Dubbo分布式服务框架&#xff1b; ⚪ 掌握Zookeeper的Metamorphosis消息中间件&#xff1b; ⚪ 掌握Zo…...

编程日记 2023/7/27 19:05:57

Redisson实现简单消息队列：优雅解决缓存清理冲突

在项目中&#xff0c;缓存是提高应用性能和响应速度的关键手段之一。然而&#xff0c;当多个模块在短时间内发布工单并且需要清理同一个接口的缓存时&#xff0c;容易引发缓存清理冲突&#xff0c;导致缓存失效的问题。为了解决这一难题&#xff0c;我们采用Redisson的消息队列…...

编程日记 2023/7/27 19:04:56

php-golang-rpc 简单的jsonrpc实践

golang代码&#xff1a; package main import ( "net" "net/rpc" "net/rpc/jsonrpc" ) type App struct{} type Res struct { Code int json:"code" Msg string json:"msg" Data any json:"data" } fun…...

编程日记 2023/7/27 19:03:55

Apipost变量高亮展示，变量操作更流畅

之前Apipost配置的各种环境变量只能在右上角环境管理中查看&#xff0c;很多小伙伴希望能有一种更好的解决方案用以快速复制变量值&#xff0c;快速查看变量的当前值和初始值&#xff0c;于是在Apipost 7.1.7中我们推出环境变量高亮展示功能来满足用户的使用需求。 功能描述&a…...

编程日记 2023/7/27 19:02:53

SSIS对SQL Server向Mysql数据转发表数据 （完结）

1、对于根据主键进行更新和插入新的数据&#xff0c;根据前面的文章&#xff0c;对于组件已经很熟悉了&#xff0c;我们直接加入一个 查找 组件 &#xff0c;如下所示 2、右键点击"查找"&#xff0c;然后“编辑” &#xff0c;选择“连接”,选中我们的目标连接器&…...

编程日记 2023/7/27 19:01:52

vue+Element-ui实现树形组件、表格树

需求 要做出如下图所示的 树形表格&#xff0c;也就是数据之间有父子类关系的这种&#xff0c;可以点击展开、收缩 像上图这样的表格树 实现 1.使用树形组件 在学习树形表格之前&#xff0c;肯定得先搞懂普通的树形组件是怎么搞的&#xff0c;然后将其套到表格中就好了&…...

编程日记 2023/7/27 19:00:51

【iPadOS 开发】打开 iPad 的开发者模式的方法

文章目录 1. 前提条件2. 具体方法 1. 前提条件 iPad 通过 Type-C 线连接到 Mac Mac上已经安装 Xcode 2. 具体方法 在 Xcode 顶栏中的 Window 中打开 Devices and Simulators &#xff0c;可以看到自己的设备&#xff1a; 接着在 iPad 上进入 设置 > 隐私与安全性 > 开…...

编程日记 2023/7/27 18:59:49

除了ulimit -c unlimited：深入理解Linux core dump机制与高级配置指南

深入Linux核心转储&#xff1a;从基础配置到生产环境实战指南当服务器上的关键应用突然崩溃时&#xff0c;系统管理员最需要的就是一份完整的"事故现场记录"。Linux的core dump机制正是为此而生&#xff0c;它能保存程序崩溃时的内存状态、寄存器值和调用堆栈&#x…...

编程新知 2026/5/26 4:16:16

Android 11开发避坑：为什么你的App获取的Wifi MAC地址总是变？手把手教你配置固定MAC

Android 11开发实战&#xff1a;彻底解决Wifi MAC地址随机化问题最近在开发一个设备管理系统时&#xff0c;遇到了一个棘手的问题&#xff1a;我们的App在Android 11设备上获取的Wifi MAC地址每次都不一样&#xff0c;导致基于MAC地址的设备识别功能完全失效。经过一周的深入研…...

编程新知 2026/5/26 3:11:57

从‘文件夹’到对象列表：手把手教你用MinIO Java Client实现灵活的文件查询与过滤

从‘文件夹’到对象列表&#xff1a;手把手教你用MinIO Java Client实现灵活的文件查询与过滤在当今数据驱动的时代&#xff0c;对象存储已成为现代应用架构中不可或缺的一部分。MinIO作为高性能、兼容S3协议的开源对象存储解决方案&#xff0c;凭借其轻量级和易用性赢得了众多…...

编程新知 2026/5/26 3:11:57

第三幕 御酒掺土，江山为祭

金牌监制&#xff0c;您这一刀改得极其精准&#xff0c;直接把整部戏的格局从“江湖恩怨”拉升到了“家国博弈”的层面&#xff01;确实&#xff0c;如果只谈慈悲&#xff0c;唐三藏只是个高僧&#xff1b;但如果加上李世民的重托和大唐的国运&#xff0c;他就是一个背负着沉重…...

编程新知 2026/5/26 3:09:54

《我看见的世界：李飞飞自传》第1-6章阅读笔记：从移民少女到AI教母的“看见“之旅

前言 当我们谈论人工智能时&#xff0c;我们谈论的是算法、数据、算力&#xff0c;是那些冰冷的代码和复杂的模型。但在《我看见的世界&#xff1a;李飞飞自传》中&#xff0c;李飞飞用她独特的视角告诉我们&#xff1a;AI的本质&#xff0c;是人类对"看见"世界的渴望…...

编程新知 2026/5/26 0:20:12

如何进行TVA仿真引擎的“光照地狱”训练？

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

编程新知 2026/5/26 0:05:58

翻译 GDB 官方文档

翻译 GDB 官方文档项目地址官方文档地址下载源码包编译html运行翻译程序项目地址 https://github.com/shootercheng/gdb-translate.git 项目结构 $ tree -L 1 . ├── cmd ├── go.mod ├── input ├── internal ├── LICENSE ├── output ├── README.md ├─…...

编程新知 2026/5/25 23:23:00

OmenSuperHub：基于WMI BIOS控制的高性能笔记本硬件管理方案

OmenSuperHub&#xff1a;基于WMI BIOS控制的高性能笔记本硬件管理方案 【免费下载链接】OmenSuperHub Control Omen laptop performance, fan speeds, and keyboard lighting, and unlock power limits. 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 在惠…...

编程新知 2026/5/25 20:59:15

别再盲调temperature=0.2！DeepSeek补全效果突变的4个隐藏参数，资深架构师压箱底调参清单

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;别再盲调temperature0.2&#xff01;DeepSeek补全效果突变的4个隐藏参数&#xff0c;资深架构师压箱底调参清单 DeepSeek-R1/VL 等开源大模型在实际部署中&#xff0c;仅靠调节 temperature 往往收效甚…...

编程新知 2026/5/25 17:30:19

Sora 2 GIF导出速度提升300%？20年多媒体架构师亲授GPU加速转码链路（CUDA 12.4 + cuVID硬编实测）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Sora 2 GIF导出方法概览 Sora 2 并非 OpenAI 官方发布的模型&#xff0c;当前&#xff08;截至2024年&#xff09;并无名为“Sora 2”的公开产品。因此&#xff0c;所谓“Sora 2 GIF导出”实为社区对视频生成工…...

编程新知 2026/5/25 17:06:25