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

1.react useState使用与常见问题

news 2026/5/28 22:17:05

文章目录

    • 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

从测速到配置：一套完整的cFosSpeed网络加速保姆级教程（适用于小白）

从零开始掌握cFosSpeed&#xff1a;网络加速全流程实战指南对于经常进行在线游戏、视频会议或大文件传输的用户来说&#xff0c;网络延迟和带宽利用率低下往往是影响体验的关键痛点。cFosSpeed作为一款专业的网络流量优化工具&#xff0c;能够显著改善这些问题&#xff0c;但许…...

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

top50 BF16算力(TFLOPS) 显卡排行榜 天梯图

排名显卡型号BF16算力(TFLOPS)售价(元)单TFLOPS价格(元)1B200(SXM)45002200000488.892H200(SXM)19801200000606.063MI300X1307750000573.834H100 SXM519501100000564.105RTX PRO 6000 Blackwell1150780000678.266H100 PCIe 80GB1560850000544.877RTX 50906803400050.008A100 80…...

编程新知 2026/5/26 3:07:52

Python 3.7 + XGBoost 多分类实战：从数据清洗到SHAP模型解释的保姆级教程

Python 3.7 XGBoost 多分类实战&#xff1a;从数据清洗到SHAP模型解释的保姆级教程在机器学习领域&#xff0c;XGBoost因其出色的性能和可解释性成为众多数据科学家的首选工具。本文将带您完整走过多分类任务的全流程&#xff0c;从原始数据到可解释的预测模型&#xff0c;每个…...

编程新知 2026/5/26 2:29:35

1901-2022年中国气温变化分析实战：用这份1km栅格数据我们能发现什么？

1901-2022年中国气温变化分析实战&#xff1a;如何从1km栅格数据中挖掘气候演变规律当一份覆盖122年、分辨率精确到1公里的气温栅格数据摆在面前时&#xff0c;我们看到的不仅是数字矩阵&#xff0c;更是一部写在经纬度坐标里的气候变迁史诗。这份由逐月数据聚合生成的逐年气温…...

编程新知 2026/5/25 23:45:44

航空发动机叶片三维扫描-诺斯顿

航空发动机叶片作为发动机的核心动力部件&#xff0c;其精度与性能直接决定发动机的推力、燃油效率及运行安全性&#xff0c;三维扫描技术作为航空制造领域的核心数字化手段&#xff0c;已广泛应用于叶片全生命周期的多个关键环节。其应用涵盖叶片研发设计阶段的逆向工程&#…...

编程新知 2026/5/25 21:17:35

LoRa物联网与动态基线算法在养殖体温监测中的实战应用

1. 项目概述&#xff1a;为什么我们需要一个智能体温监测系统&#xff1f;在规模化养殖场里干了十几年&#xff0c;我见过太多因为体温异常没被及时发现而导致的损失。一头育肥猪突然不吃食&#xff0c;等饲养员第二天巡栏发现时&#xff0c;可能已经高烧好几天&#xff0c;继发…...

编程新知 2026/5/25 20:22:06

告别杂乱！用FileMenu Tools 8.4.2一键清理Windows 11右键菜单（附隐藏技巧）

Windows 11右键菜单精简指南&#xff1a;用FileMenu Tools打造高效工作流每次在文件上点击右键时&#xff0c;那个缓慢弹出的冗长菜单是否让你感到烦躁&#xff1f;随着安装的软件越来越多&#xff0c;Windows的右键菜单往往会变得臃肿不堪&#xff0c;严重影响工作效率。今天&…...

编程新知 2026/5/25 20:14:00

通过Taotoken标准OpenAI协议实现分钟级集成现有代码

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken标准OpenAI协议实现分钟级集成现有代码 1. 迁移背景与核心思路 许多开发团队在构建AI应用时&#xff0c;会直接使用O…...

编程新知 2026/5/25 20:03:54

人工智能的伦理与安全：这3个问题，软件测试从业者必须重视

随着大语言模型、生成式AI的爆发式落地&#xff0c;人工智能已经从实验室走向千行百业的生产场景&#xff0c;深刻改变着软件开发与交付的逻辑。对于直接把控产品质量关口的软件测试从业者来说&#xff0c;我们的职责早已不再是单纯验证功能可用性、排查性能bug那么简单——AI系…...

编程新知 2026/5/25 17:53:13

从《王者荣耀》野怪巡逻到RTS单位集结：拆解Unity Navigation系统在实战中的4种高级用法

从《王者荣耀》野怪巡逻到RTS单位集结&#xff1a;拆解Unity Navigation系统在实战中的4种高级用法在MOBA游戏中&#xff0c;野怪沿着固定路线巡逻时突然转向追击玩家&#xff1b;RTS战场上&#xff0c;上百个单位向同一目标点移动却能保持整齐队形&#xff1b;潜行游戏中&…...

编程新知 2026/5/27 6:01:00