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

1.react useState使用与常见问题

news 2026/4/3 17:05:26

文章目录

    • 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

飞书推送文件给指定用户

首先要先把文件上传到飞书服务器&#xff0c;获取文件key。然后调用消息发送API进行文件推送// 上传文件String fileKey uploadFileToFeishu();// 将文件推送给用户列表sendFileToFeishuUserId(fileKey,userList);/*** 上传文件到飞书云端* return* throws Exception*/privat…...

编程新知 2026/4/3 16:34:13

突破性能瓶颈：Rust如何重塑数据科学与AI的未来

突破性能瓶颈&#xff1a;Rust如何重塑数据科学与AI的未来 在当今数据驱动的时代&#xff0c;数据科学与AI领域正面临着前所未有的性能挑战。随着数据集规模的爆炸式增长和模型复杂度的不断提升&#xff0c;传统编程语言在处理高并发、大规模数据时逐渐显露出性能瓶颈。而Rust…...

编程新知 2026/4/3 14:21:44

终极Fluxion数组操作指南：掌握ArrayUtils.sh提升脚本效率的10个技巧

终极Fluxion数组操作指南&#xff1a;掌握ArrayUtils.sh提升脚本效率的10个技巧 【免费下载链接】fluxion Fluxion is a remake of linset by vk496 with enhanced functionality. 项目地址: https://gitcode.com/gh_mirrors/fl/fluxion Fluxion作为一款功能强大的网络工…...

编程新知 2026/4/3 14:11:35

效率提升秘籍：借助快马AI自动生成健壮的视频续播管理模块

最近在开发视频播放功能时&#xff0c;遇到了一个很常见的需求&#xff1a;实现"继续播放上次观看位置"的功能。本以为是个简单的功能&#xff0c;但实际开发中发现要考虑的细节还真不少。经过一番折腾&#xff0c;我总结出了一套高效的解决方案&#xff0c;分享给大…...

编程新知 2026/4/3 13:25:07

SRWE：打破Windows窗口限制的智能编辑器

SRWE&#xff1a;打破Windows窗口限制的智能编辑器 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE SRWE&#xff08;Simple Runtime Window Editor&#xff09;是一款专为Windows系统设计的实时窗口编辑工具&am…...

编程新知 2026/4/3 13:02:51

Linux shell之for in的使用及说明

一、语法 1 2 3 4 for 变量名 in 列表 do 程序段(command) done 注意1&#xff1a;是变量名而不是$变量&#xff01; 注意2&#xff1a;列表可以做文章&#xff01; 二、应用 第一类&#xff1a;数字性循环-->seq在in后面的应用 1 2 3 4 5 6 #!/bin/bash …...

编程新知 2026/4/3 11:58:14

GetQzonehistory：3步轻松永久备份QQ空间所有历史说说

GetQzonehistory&#xff1a;3步轻松永久备份QQ空间所有历史说说 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 还在担心QQ空间里那些承载青春记忆的说说会突然消失吗&#xff1f;GetQ…...

编程新知 2026/4/3 11:52:10

ai辅助qt开发：让快马智能生成解决界面卡顿的多线程方案

AI辅助Qt开发&#xff1a;让快马智能生成解决界面卡顿的多线程方案 最近在开发一个Qt应用时遇到了一个典型问题&#xff1a;点击按钮执行耗时计算任务会导致界面卡死。这种场景在数据处理、文件操作等需要长时间运行的任务中很常见。通过InsCode(快马)平台的AI辅助功能&#x…...

编程新知 2026/4/3 9:22:33

Linux内核驱动开发入门：我是如何给一个虚拟CDC ACM设备写“Hello World”驱动的

Linux内核驱动开发入门&#xff1a;手把手实现虚拟CDC ACM设备驱动 第一次接触Linux内核驱动开发时&#xff0c;面对复杂的代码结构和晦涩的概念&#xff0c;我完全摸不着头脑。直到导师扔给我一个USB转串口设备&#xff1a;"试试看能不能让它在Linux上工作"。经过两…...

编程新知 2026/4/3 8:37:18

Qwen2.5-VL-7B-Instruct新手必看：无需网络，纯本地部署的多模态AI工具

Qwen2.5-VL-7B-Instruct新手必看&#xff1a;无需网络&#xff0c;纯本地部署的多模态AI工具 你是不是经常遇到这样的场景&#xff1a;看到一张复杂的图表&#xff0c;想快速提取里面的数据&#xff1b;收到一张产品照片&#xff0c;需要生成详细的描述文案&#xff1b;或者想…...

编程新知 2026/4/3 7:44:38