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

React Hooks中use的细节

news 来源：原创 2025/7/14 19:46:06

文档

useState

useState如果是以函数作为参数，那要求是一个纯函数，不接受任何参数，同时需要一个任意类型的返回值作为初始值。

useState可以传入任何类型的参数作为初始值，当以一个函数作为参数进行传入的时候需要注意：
如果只传入了函数名，那么这个函数参数只会在初始化渲染的时候被调用，后续页面发生变化也不会触发函数；如果传入的是函数调用后的结果，那么当初始化渲染和后续页面变化的时候都会触发函数。

import { useState } from 'react';export default function Counter() {const [age, setAge] = useState(increment); // 因为传入的是函数名，所以只有在初始化的时候才触发，因此只有一个输出const [age, setAge] = useState(increment()); // 传入的是函数返回的内容，所以当点击+1的按钮进行更新的时候也会触发increment函数，所以一直会有输出function increment() {console.log('-----输出')return 0}function add(){setAge(a => a + 1);}return (<><h1>Your age: {age}</h1><button onClick={() => {add();}}>+1</button></>);
}

箭头函数同理：

import { useState } from "react";export default function Counter() {const [age, setAge] = useState(() => {console.log("-----输出");return 0;});const [age, setAge] = useState((() => {console.log("-----输出");return 0;})());function add() {setAge((a) => a + 1);}return (<><h1>Your age: {age}</h1><buttononClick={() => {add();}}>+1</button></>);
}

请添加图片描述

setState是变更state的方法，它接受任何类型的值，包括函数。需要注意的是，set函数不会更新已经运行代码中的state状态变量，因此，当一个运行中的代码存在同时多次触发同一个set函数的时候，set中的state值其实都是之前没变化时的同一个。如果需要解决这个问题，可以向set函数传递一个更新函数，它必须是纯函数，只接受待定的 state 作为其唯一参数，并应返回下一个状态。此时，更新函数将会获取待定状态并从中计算下一个状态。
```
//假设 age 为 42，这个处理函数三次调用 setAge(age + 1)：
function add() {setAge(age + 1); // setAge(42 + 1)，因为add函数已经运行了，set函数不会更新里面的age值，所以取得全是上一次的值，即42，因此，每个 setAge(age + 1) 调用变成了 setAge(43)setAge(age + 1); // setAge(42 + 1)setAge(age + 1); // setAge(42 + 1)
}
```
解决这个问题，你可以向 setAge 传递一个更新函数，而不是下一个状态：
```
function handleClick() {setAge(a => a + 1); // setAge(42 => 43)setAge(a => a + 1); // setAge(43 => 44)setAge(a => a + 1); // setAge(44 => 45)
}
```
这里，a => a + 1 是更新函数。它获取待定状态并从中计算下一个状态。

React 将更新函数放入队列中。然后，在下一次渲染期间，它将按照相同的顺序调用它们：

a => a + 1 将接收 42 作为待定状态，并返回 43 作为下一个状态。
a => a + 1 将接收 43 作为待定状态，并返回 44 作为下一个状态。
a => a + 1 将接收 44 作为待定状态，并返回 45 作为下一个状态。
现在没有其他排队的更新，因此 React 最终将存储 45 作为当前状态。

按照惯例，通常将待定状态参数命名为状态变量名称的第一个字母，如 age 为 a。然而，你也可以把它命名为 prevAge 或者其他你觉得更清楚的名称。

其他参考：
React Hooks中常用Hooks的用法详解
React Hooks中常用Hooks钩子的用法详解

React Hooks中use的细节

文档 useState useState如果是以函数作为参数，那要求是一个纯函数，不接受任何参数，同时需要一个任意类型的返回值作为初始值。 useState可以传入任何类型的参数作为初始值，当以一个函数作为参数进行传入的时候需要注意&#xff…...

编程日记 2025/7/14 19:46:06

Android 16 开发者预览版获取 Android 16在 Google Pixel 设备上获取 Android 16设置 Android 模拟器设置 Android 16 SDK获取 Android Studio安装 SDK更新应用的 build 配置获取 Android 16 你可以通过以下任一方式获取 Android 16 在 Google Pixel 设备上获取 Android 1…...

编程日记 2025/7/14 19:28:51

蓝桥杯c++算法秒杀【6】之动态规划【上】（数字三角形、砝码称重(背包问题)、括号序列、组合数问题：：：非常典型的必刷例题！！！）

下将以括号序列、组合数问题超级吧难的题为例子讲解动态规划别忘了请点个赞收藏关注支持一下博主喵！！！! ! ! ! ！ 关注博主，更多蓝桥杯nice题目静待更新:) 动态规划一、数字三角形【问题描述】上图给出了…...

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

c#:winform引入bartender

1、vs新建项目 ①选择Windows窗体应用（.NET Framework） 2、将bartender引入vs中 ①找到bartender的安装目录，复制Seagull.BarTender.Print.dll文件 ②粘贴到项目->bin->Debug文件，并可创建Model文件夹：为了存放…...

编程日记 2025/7/14 6:15:00

Zabbix 模板翻译自动化教程

在企业 IT 运维管理中，Zabbix 作为一款强大的开源监控平台被广泛应用。而 Zabbix 模板作为监控配置的重要组成部分，用来定义监控项、触发器、图形等。随着国际化的需求增加，Zabbix 模板的翻译工作变得日益重要，特别是在需要为不同…...

编程日记 2025/7/14 18:52:52

HarmonyOS开发：DevEco Studio的Beta3（5.0.5.200）新增和增强特性

新增特性 DevEco Studio支持开发API 13工程。DevEco Profiler Frame模板新增Lost Frames和Hitch Time泳道，用于识别和优化卡顿和丢帧现象。具体请参考Frame分析。hvigor-config.json5中properties下新增ohos.arkCompile.noEmitJs字段，用于指定ArkTS编译…...

编程日记 2025/7/14 5:43:29

macOS安装nvm node

macOS安装nvm macOS安装nvm创建 nvm 工作目录配置环境变量使用 nvm查看可用的 Node.js 版本安装特定版本 macOS安装nvm brew install nvm创建 nvm 工作目录 mkdir ~/.nvm配置环境变量 vim ~/.zshrc# nvm export NVM_DIR"$HOME/.nvm" [ -s "/opt/homebrew/opt…...

编程日记 2025/7/14 19:12:39

SpringBoot 集成MQTT实现消息订阅

1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-integration</artifactId></dependency><dependency><groupId>org.springframework.integrat…...

编程日记 2025/7/14 18:51:11

VM+Ubuntu18.04+XSHELL+VSCode环境配置

前段时间换了新电脑，准备安装Linux学习环境：VM虚拟机、Ubuntu18.04操作系统、XSHELL、XFTP远程连接软件、VSCode编辑器等，打算把安装过程记录一下。 1. 虚拟机介绍为什么要用虚拟机？ 想学习Linux操作系统，一般有3种…...

编程日记 2025/7/14 18:49:30

C#上机练习66-70

66.数组x中存有20个四位整数，请编制函数，求出正整数的个数tn。以及各位数字之和是偶数的数的个数tc,以及满足条件的这些数的算术平均ta.，将tn，tc，ta在控制台输出。 67.数组x中存有20个四位整数，请编制函数…...

编程日记 2025/7/14 1:34:42

pip 与当前python环境版本不匹配, pyenv, pipenv, conda

目录 pip 与当前python环境不匹配解决pip版本不一致 CondaPyenv pip 与当前python环境不匹配电脑中安装了多个python虚拟环境, 有anaconda创建的虚拟环境,也有pyenv创建的虚拟环境,但是环境变量配置的是anaconda的路径从而导致在vscode中选择的python版本是3.8.10,而pip却是…...

编程日记 2025/7/14 18:31:46

HAProxy面试题及参考答案（精选80道面试题）

目录什么是 HAProxy？ HAProxy 主要有哪些功能？ HAProxy 的关键特性有哪些？ HAProxy 的主要功能是什么？ HAProxy 的作用是什么？解释 HAProxy 在网络架构中的作用。 HAProxy 与负载均衡器之间的关系是什么？ HAProxy 是如何实现负载均衡的？阐述 HAProxy 的四层…...

编程日记 2025/7/14 18:57:32

ElasticSearch为什么不能在query阶段直接返回_id,从而避免fetch?

整理自Github的一个issue,也正好解答了我的疑惑 https://github.com/elastic/elasticsearch/issues/17159 提问是否可以避免搜索的fetch阶段并仅返回文档ID？查询阶段结束时是否有_id，这样当我只需要_id时，fetch就多余了？可以通过…...

编程日记 2025/7/14 19:06:17

任意文件读取漏洞（CVE-2024-7928）修复

验证CVE-2024-7928问题是否存在可以使用如下方法： https://域名/index/ajax/lang?lang..//..//目录名/文件名（不带后缀） 目录名是该项目的一个目录，这里目录位置为nginx设置站点目录为基准，网上两层目录。文件名…...

编程日记 2025/7/14 16:11:07

07 初始 Oracle 优化器

查询优化器，简称优化器，是数据库最核心的组件之一。我们在这个系列的第一篇文章中已经给大家介绍了，优化器会参与到SQL语句的解析过程中，用来生成SQL语句的执行计划，直接决定SQL语句执行性能的优劣。什么是执行计划 …...

编程日记 2025/7/11 13:55:02

深入理解React Hooks：使用useState和useEffect

引言 React Hooks是React 16.8引入的一项强大功能，它使函数组件能够使用状态和其他React特性。本文将深入探讨两个最常用的Hooks：useState和useEffect，并通过实际代码示例展示它们的使用方法。 1. 什么是React Hooks？ React Ho…...

编程日记 2025/7/14 18:33:04

深入浅出剖析典型文生图产品Midjourney

2022年7月，一个小团队推出了公测的 Midjourney，打破了 AIGC 领域的大厂垄断。作为一个精调生成模型，以聊天机器人方式部署在 Discord，它创作的《太空歌剧院》作品，甚至获得了美国「数字艺术/数码摄影」竞赛单元一等奖。这一事件展示了 AI 在绘画领域惊人的创造力，让人们…...

编程日记 2025/7/14 19:22:33

大数据学习18之Spark-SQL

1.概述 1.1.简介 Spark SQL 是 Apache Spark 用于处理结构化数据的模块。 1.2.历史 1.2.1.Shark Hadoop诞生初期，Hive是唯一在Hadoop上运行的SQL-on-Hadoop工具，MR的中间计算过程产生了大量的磁盘落地操作，消耗了大量的I/O，降低…...

编程日记 2025/7/13 21:20:56

Flink开发入门简单案例--统计实时流订单

Flink开发入门简单案例 0.简介1.订单数据生成器1.1 新建工程TestFlink1.2 在pom.xml中引入Flink依赖包1.3 订单数据生成类订单类（Item）订单生成数据流类测试订单生成类 2.订单统计2.1 仅统计订单中商品的件数 2.2 同时统计商品数量和金额 0.简介本案例…...

编程日记 2025/7/14 17:01:44

Scala身份证上的秘密以及Map的遍历

object test {def main(args: Array[String]): Unit {val id "42032220080903332x"//1.生日是？//字符串截取val birthday id.substring(10,14) //不包括终点下标println(birthday)val year id.substring(6,10) //println(year)//性别：倒数第…...

编程日记 2025/7/10 9:12:23

RabbitMQ

交换机 Fanout：广播Direct：定向路由Topic：匹配符声明队列和交换机基于Bean基于注解消息转换器 JSON序列化...

编程日记 2025/6/30 20:24:07

全景图像（Panorama Image）向透视图像（Perspective Image）的跨视图转化（Cross-view）

一、概念讲解全景图像到透视图像的转化是一个复杂的图像处理过程，它涉及到将一个360度的全景图像转换为一个具有透视效果的图像，这种图像更接近于人眼观察世界的方式。全景图像通常是一个矩形图像，它通过将球面图像映射到平面上得到&#xf…...

编程日记 2025/7/10 8:38:12

matlab 实现混沌麻雀搜索算法的光伏MPPT控制仿真

1、内容简介略 103-可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/7/9 10:04:43

【设计模式】【行为型模式（Behavioral Patterns）】之策略模式（Strategy Pattern）

1. 设计模式原理说明策略模式（Strategy Pattern） 是一种行为设计模式，它允许你定义一系列算法，并将每个算法封装起来，使它们可以互换。策略模式让算法的变化独立于使用算法的客户。通过这种方式，客户端可…...

编程日记 2025/7/13 18:06:24

深度学习笔记之BERT(三)RoBERTa

深度学习笔记之RoBERTa 引言回顾：BERT的预训练策略RoBERTa训练过程分析静态掩码与动态掩码的比较模型输入模式与下一句预测使用大批量进行训练使用Byte-pair Encoding作为子词词元化算法更大的数据集和更多的训练步骤 RoBERTa配置引言本节将介绍一种基于 BERT \t…...

编程日记 2025/7/14 14:09:00

windows docker 入门

这个教程将指导你如何安装Docker、运行第一个容器以及理解一些基本概念。第一步：安装Docker Desktop for Windows 系统要求： Windows 10 64位版本（专业版、企业版或教育版）。启用Hyper-V和Windows Subsystem for Linux (WSL 2)。…...

编程日记 2025/7/12 23:47:07

【软考速通笔记】系统架构设计师③——信息安全技术基础知识

文章目录一、前言二、信息安全基础知识2.1 信息安全的基本要求2.2 信息安全的范围2.3 网络安全表现2.4 安全措施包括三、信息安全系统的组成框架3.1 技术体系：3.2 组织机构体系：3.3 管理体系四、信息加解密技术4.1 对称密钥加密算法4.2 非对称密钥加密…...

编程日记 2025/7/9 10:06:13

Spring Boot整合Redis Stack构建本地向量数据库相似性查询

Spring Boot整合Redis Stack构建本地向量数据库相似性查询在微服务架构中，数据的高效存储与快速查询是至关重要的。Redis作为一个高性能的内存数据结构存储系统，不仅可以用作缓存、消息代理，还可以扩展为向量数据库，实现高效的相…...

编程日记 2025/7/12 14:08:48

设计模式-装饰者模式

背景有一个咖啡馆有单品咖啡：意大利浓咖啡、美式咖啡、无因咖啡调料：牛奶、巧克力点单时需要点一个单品咖啡，可以选择加调料或者不加。最后计算价格。较好的传统思路： 创建一个抽象的咖啡类，其中有各个调…...

编程日记 2025/7/3 18:15:18

.NetCore 过滤器和拦截器的区别

Asp.NET Core 中的过滤器（Filter）和拦截器（Interceptor）是两个不同的概念，但它们在某些方面有相似之处，也有明显的区别。 🔑过滤器（Filter） 过滤器是Asp.NET Core中用于…...

编程日记 2025/7/14 18:17:51

uniapp实现APP版本升级

App.vue 直接上代码 <script>export default {methods: {//APP 版本升级Urlupload() {// #ifdef APP-PLUSplus.runtime.getProperty(plus.runtime.appid, (info) > {// 版本号变量持久化存储getApp().globalData.version info.version;this.ToLoadUpdate(info.versi…...

编程日记 2025/7/12 16:28:42

c语言的qsort函数理解与使用

介绍：qsort 函数是 C 标准库中用于排序的快速排序算法函数。它的用法非常灵活，可以对任意类型的元素进行排序，只要提供了比较函数即可。 qsort 函数原型及参数解释： void qsort ( void* base, //指向要排序的数组的首元素…...

编程日记 2025/7/13 8:13:35

k8s集群增加nfs-subdir-external-provisioner存储类

文章目录前言一、版本信息二、本机安装nfs组件包三、下载nfs-subdir-external-provisioner配置文件并进行配置1.下载文件2.修改配置三、进行部署备注：关于镜像无法拉取问题的处理前言手里的一台服务器搭建一个单点的k8s集群，然后在本机上使用nfs-su…...

编程日记 2025/7/11 5:23:55

IT成长之路-ubuntu驱动篇

历时3天的蹂躏，总结驱动安装全面教程。步骤一、安装gcc、g和make包 #脚本更新 sudo apt-get update #编译gcc sudo apt-get install gcc #编译g sudo apt-get install g #编译make sudo apt-get install make 注意： gcc、g版本可能会导致显卡驱动安…...

编程日记 2025/7/12 18:50:30

AI大模型如何赋能电商行业，引领变革

目录 1.概述 1.1. 购物推荐系统 1.2. 会员分类与客户细分 1.3. 动态商品定价 1.4. 库存和供应链管理 1.5. 客户服务与体验 1.6. 内容生成与管理 2.AI技术在电商中的创新应用 2.1.淘宝 2.2.京东 2.3.华为 2.4.小米 3.AI技术在提高电商平台销售效率方面发挥的作用 …...

编程日记 2025/7/14 8:12:50

QT6学习第四天感受QT的文件编译

QT6学习第四天感受QT的文件编译使用纯代码编写程序新建工程使用其他编辑器纯代码编写程序并在命令行运行使用 .ui 表单文件生成界面使用自定义 C 窗口类使用现成的QT Designer界面类使用纯代码编写程序我们知道QT Creator中可以用拖拽的方式在 .ui 文件上布局&#xff0c…...

编程日记 2025/7/8 21:16:43

地平线 bev_cft_efficientnetb3 参考算法-v1.2.1

01 概述在自动驾驶感知算法中 BEV 感知成为热点话题，BEV 感知可以弥补 2D 感知的缺陷构建 3D “世界”，更有利于下游任务和特征融合。地平线集成了基于 bev 的纯视觉算法，目前已支持 ipm-based 、lss-based、 transformer-based&#xff…...

编程日记 2025/7/12 13:37:46

【linux】shell脚本

文章目录 1. jar包启动脚本1.1 方式一1.2 方式二 2. 进程关闭脚本3. 操作mysql4. impala建表语句提取5. 监控磁盘存量6. 清日志脚本7. 替换tomcat的启动端口8. 将一行数据按照空格依次读取 1. jar包启动脚本 1.1 方式一 #!/bin/sh RESOURCE_NAME/usr/local/applications/scre…...

编程日记 2025/7/13 17:08:25

构建一个去中心化的零售生态参与者的商业模型

在数字化和去中心化技术快速发展的背景下，传统零售行业正迎来革命性的转型。去中心化零售生态不仅让消费者、商家和内容创作者在同一平台上共同参与价值的创造和分配，还推动了零售体验、数据控制和社会互动的彻底变革。本文将探讨如何构建一个去中心化的…...

编程日记 2025/7/8 5:13:33

Spring Boot开发实战：从入门到构建高效应用

Spring Boot 是 Java 开发者构建微服务、Web 应用和后端服务的首选框架之一。其凭借开箱即用的特性、大量的自动化配置和灵活的扩展性，极大简化了开发流程。本文将以实战为核心，从基础到高级，全面探讨 Spring Boot 的应用开发。一、Spring B…...

编程日记 2025/7/10 14:00:48

MyBatis（mybatis_plus）中TypeHandler的使用教程

MyBatis（mybatis_plus）中TypeHandler的使用教程一.TypeHandler作用及其使用场景在我们平常开发操作数据库时，查询、插入数据等操作行为，有时会报数据类型不匹配异常，就可以得知数据的类型是不唯一的必然是多种不同…...

编程日记 2025/7/14 6:53:28

【C++】IO库（三）：string流

8.3 string 流 sstream 头文件定义了三个类型来支持内存 IO，这些类型可以向 string 写入数据，也可以从 string 读取数据，就像 string 是一个 IO 流一样。 istringstream 从 string 读数据；ostringstream 向 string 写入数据&…...

编程日记 2025/7/13 21:20:58

C# 反射详解

反射是C#中的一个强大特性，允许程序在运行时检查和操作类型和对象的信息。通过反射，你可以获取类型的属性、方法、构造函数等信息，并可以动态创建对象、调用方法或访问属性，甚至可以实现某些框架或库的核心功能。反射的基本概念…...

编程日记 2025/7/14 10:12:38

量化交易系统开发-实时行情自动化交易-8.量化交易服务平台（一）

19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。接下来会对于收集整理的33个量化交易服…...

编程日记 2025/7/12 18:04:47

【开发商城系统】

在广西开发商城系统，可以按照以下步骤进行： 确定项目需求：与客户沟通，了解商城系统所需的功能和特性，并确定项目的预算和时间限制。进行市场调研：了解广西地区的电商市场情况，包括竞争对手、消…...

编程日记 2025/7/14 8:40:17

C++设计模式-享元模式

动机(Motivation) 在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中，从而带来很高的运行时代价——主要指内存需求方面的代价。如何在避免大量细粒度对象问题的同时，让外部客户程序仍然能够透明地使用面向对象的方式来进行操作…...

编程日记 2025/7/14 17:00:42

Spark——安装步骤详细教程

1、安装步骤 1、上传 cd /opt/modules 2、解压 tar -zxf spark-3.1.2-bin-hadoop3.2.tgz -C /opt/installs 3、重命名 cd /opt/installs mv spark-3.1.2-bin-hadoop3.2 spark-local 4、创建软链接 ln -s spark-local spark 5、配置环境变量： vi /etc/prof…...

编程日记 2025/7/13 13:01:03

摆烂仙君传——深度学习秘境奇缘

第一章：深度学习秘境在修仙界与科技交织的边缘，八荒六合九天无上摆烂仙君在其高科技修炼室中感应到一股神秘的召唤。这股力量似乎与他的灵魂产生了共鸣，引导他前往传说中的深度学习秘境。在那里，古老的仙法与前沿的算法交织&…...

编程日记 2025/7/13 15:38:54

C++设计模式：桥接模式（Bridge）

什么是桥接模式？ 桥接模式（Bridge Pattern）是一个用来解耦的设计模式，它将抽象层和实现层分离开，让它们可以独立变化。用最简单的话来说，就是让你能够改变抽象的功能和具体的实现，而不需要修改…...

编程日记 2025/7/12 22:45:32

c++源码阅读__smart_ptr__正文阅读

文章目录简介源码解析1. 引用计数的实现方式2. deleter静态方法的赋值时间节点3.make_smart的实现方式与好处4. 几种构造函数4.1 空构造函数4.2 接收指针的构造函数4.3 接收指针和删除方法的构造函数 , 以及auto进行模板lambda的编写4.4 拷贝构造函数4.5 赋值运算符 5. rele…...

编程日记 2025/7/12 22:48:56

useState

相关文章：