React 中 useState 语法详解

 1. 语法定义

const [state, dispatch] = useState(initData)

state:定义的数据源,可视作一个函数组件内部的变量,但只在首次渲染被创造。

dispatch:改变state的函数,推动函数渲染的渲染函数,有非函数和函数两种情况。

initData:state的初始值,有非函数和函数两种情况。

2. 使用案例

1. 变量的定义和修改

import { useState } from 'react'// 定义变量
const [name, setName] = useState('Vue')// 修改变量
const handleUpdate = () => {setName('React')
}

2. 对象的定义和修改

import { useState } from 'react'// 定义对象
const [user, setUser] = useState({ name: '张三', age: 30 })// 修改对象
const handleUser = () => {// setUser({ name: '李四', age: 50 })setUser({ ...user, age: 50 })
}

3. 数组的定义和修改

import { useState } from 'react'// 定义数组
const [list, setList] = useState(['Tom', 'Jack']);// 修改数组
const handleList = () => {setList([...list, 'Lily'])
}

4. 声明时添加逻辑返回

import { useState } from 'react'const num = 1;// 声明通过函数返回
const [name ,setName] = useState(()=>{if(num==1){return "这是单数"}else{return "这是双数"}
})

5. 更新时添加逻辑返回


import { useState } from 'react'// 定义变量
const [count, setCount] = useState(0);// 修改变量
const handleCount = () => {// 通过函数返回setCount((count) => count + 1)}

3. 异步更新

React是异步更新,它会将多次更新合并到一起。

import { useState } from 'react'// 定义变量
const [count, setCount] = useState(0);// 修改变量
const handleCount = () => {setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)
}

由于React是异步合并更新,上面调用了4次setCount会统一合并,值会变为4,但只会渲染一次。

如果想要强制刷新渲染,可以使用flushSync函数提高优级,这样就会又渲染一次。

import { useState } from 'react'import { flushSync } from 'react-dom'// 定义变量
const [count, setCount] = useState(0);// 修改变量
const handleCount = () => {// setCount(count => count + 1)// setCount(count => count + 1)// setCount(count => count + 1)// setCount(count => count + 1)// 合并批量更新渲染一次setTimeout(() => {setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)})// 强制更新渲染一次flushSync(() => {setCount(count => count + 1)setCount(count => count + 1)})}

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

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

相关文章

ROS参数服务器增删改查实操C++

ROS参数服务器增删改查实操C 创建功能包参数服务器新增(修改)参数参数服务器获取参数参数服务器删除参数 ROS通信机制包括话题通信、服务通信和参数服务器三种通信方式,各原理及代码实现如下表 功能博客链接说明VScode配置 ROS 环境VScode创建…

【Vue实战教程】之Vuex状态管理详解

Vuex状态管理 1 Vuex简介 1.1 什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用了集中式存储管理应用的所有的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 简单来说,Vuex是一个适用于在Vue项目开发时使用的状态管理…

机器学习 | 回归算法原理——多项式回归

Hi,大家好,我是半亩花海。接着上次的最速下降法(梯度下降法)继续更新《白话机器学习的数学》这本书的学习笔记,在此分享多项式回归这一回归算法原理。本章的回归算法原理基于《基于广告费预测点击量》项目,…

Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习多输入单输出时间序列预测

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 步骤1: 数据准备 收集和整理历史数据。确保数据集经过适当的预处理,如归一…

【人工智能】Transformers之Pipeline(五):深度估计(depth-estimation)

目录 一、引言 二、深度估计(depth-estimation) 2.1 概述 2.2 技术路径 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模型排名 三、总结 一、引言 pipeline&#xff08…

mysql JSON特性优化

有朋友问到,mysql如果要根据json中的某个属性过滤,数据量大的话,性能很差,要如何提高性能? 为什么要用json串? 由于一些特定场景,mysql需要用到json串,例如文档,不同的…

详解Stable Diffusion 原理图

参考英文文献:The Illustrated Stable Diffusion – Jay Alammar – Visualizing machine learning one concept at a time. 在这个Stable Diffusion模型的架构图中,VAE(变分自编码器)模型对应的是图中的 E 和 D 部分。 具体来说…

【BUG】已解决:NameError: name ‘python‘ is not defined

NameError: name ‘python‘ is not defined 目录 NameError: name ‘python‘ is not defined 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身,就职于…

数据结构和算法(刷题)- 寻找全排列后的下一个数

寻找全排列后的下一个数 问题:给出一个正整数,找出这个正整数所有数字全排列的下一个数。也就是这个数的数字全排列,找到一个比原数大的而且只比原数大的数。 例子:输入:12345 输出:12354 解法&#xff1…

深入学习STL标准模板库

C STL standard template libaray 标准模板库 目录 C STL standard template libaray 标准模板库 一、标准容器顺序容器vectordequelistvector deque list对比 容器适配器stackqueuepriority_queue 关联容器(1)无序关联容器unordered_setunordered_multisetunordered_mapunorde…

Cxx Primer-chap7

类的基本思想是数据抽象和封装,前者强调interface和implement分离,后者在此基础上,强调访问控制符(存疑)。同时类的实现者和使用者考虑的角度不同,前者考虑实现效率,后者仅需关注功能即可&#…

C++相关概念和易错语法(23)(set、仿函数的应用、pair、multiset)

1.set和map存在的意义 (1)set和map的底层都是二叉搜索树,可以达到快速排序(当我们按照迭代器的顺序来遍历set和map,其实是按照中序来遍历的,是排过序的)、去重、搜索的目的。 (2&a…

与众不同的社交体验:Facebook的新功能与新变化

在快速变化的社交媒体领域,Facebook不断引入创新功能和变化,以满足用户日益增长的需求,并提供与众不同的社交体验。从增强现实到数据隐私,Facebook的新功能和更新正在塑造一个全新的社交平台。本文将深入探讨这些新功能和变化&…

用代理IP会频繁掉线是什么原因?HTTP和SOCKS5协议优劣势是什么?

在使用代理IP的过程中,频繁掉线是一个常见且令人头痛的问题。要解决这一问题,我们需要先了解其原因,然后比较HTTP和SOCKS5两种代理协议的优劣势,以选择最适合的解决方案。 一、代理IP频繁掉线的原因 1. 代理服务器稳定性 代理服…

arm环境下构建Flink的Docker镜像

准备工作 资源准备 按需下载 flink,我的是1.17.2版本。官方说1.13版本之后的安装包兼容了arm架构,所以直接下载就行。 如需要cdc组件,提前下载好。 服务器准备 可在某云上购买arm服务器,2c/4g即可,按量付费。 带宽…

谷粒商城实战笔记-43-前端基础-Vue-使用Vue脚手架进行模块化开发

文章目录 一,Vue的模块化开发1,目录结构2,单文件组件 (SFC)3,模块化路由4,Vuex 模块5,动态组件和异步组件6,抽象和复用7,构建和打包8,测试9,文档和注释10&…

达梦逻辑备份dexp和恢复dimp

逻辑备份是指利用 dexp/dexpdp 导出工具,将指定对象(库级、模式级、表级)的数据导出到文件的备份方式。逻辑备份针对的是数据内容,并不关心这些数据物理存储在什么位置。 逻辑导出和逻辑导入数据库对象分为四种级别:数…

【java基础】进程和线程的区别

线程(Thread)和进程(Process)是操作系统中管理和调度的基本单位,它们在概念上有显著的区别,但又紧密相关。以下是线程和进程的主要区别: 进程(Process) 独立的执行环境&…

Nginx反向代理概述

正向代理与反向代理概述 正向代理: 定义:正向代理位于客户端和目标服务器之间,客户端的请求首先发送到代理服务器,然后由代理服务器转发到目标服务器,最后将目标服务器的响应返回给客户端。 作用:正向代理…

Linux - 进程的概念、状态、僵尸进程、孤儿进程及进程优先级

目录 进程基本概念 描述进程-PCB task_struct-PCB的一种 task_struct内容分类 查看进程 通过系统目录查看 通过ps命令查看 通过系统调用获取进程的PID和PPID 通过系统调用创建进程- fork初始 fork函数创建子进程 使用if进行分流 Linux进程状态 运行状态-R 浅度睡眠状态-S…