【React】React18 Hooks之useState

目录

  • useState
    • 案例1(直接修改状态)
    • 案例2(函数式更新)
    • 案例3(受控表单绑定)
    • 注意事项1:set函数不会改变正在运行的代码的状态
    • 注意事项2:set函数自动批量处理
    • 注意事项3:在下次渲染之前多次更新同一状态
  • 最后

在这里插入图片描述

React官方文档

useState

useState在组件的顶层调用来声明和操作状态变量。用法:

const [state, setState] = useState(initialState)

useState返回一个包含两个值的数组:

  • state:当前状态。在第一次渲染时,它将匹配initialState传递的数据。
  • setState:该set函数可将状态更新为不同的值并触发重新渲染。set函数没有返回值
  • initialState:状态的初始值,它可以是任何类型的值,如果是函数,则将函数返回值作为初始值

案例1(直接修改状态)

import {useState} from 'react'
function App(){const [count,setCount] = useState(0);return (<><div>count:{count}</div><button onClick={()=>setCount(1)}>+</button></>)
} 
export default App

点击加号,页面中count变成1,继续点击加号,count值不变

案例2(函数式更新)

import {useState} from 'react'
function App(){const [count,setCount] = useState(0)const handlerClick = ()=>{setCount(count+1)}return (<><div>count:{count}</div><button onClick={handlerClick}>+</button></>)
} export default App

点击加号按钮,可以看到页面中数据改变,并且hooks中的State状态也随之改变
在这里插入图片描述

案例3(受控表单绑定)

import {useState} from 'react'
function App(){// 1 先声明一个react 状态const [value,setValue] = useState('')//2 核心// (1)通过value属性绑定react状态// (2)绑定onChange事件,通过事件参数e拿到输入框的最新的值,反向修改react状态return (<><div><input type='text'value={value}onChange={(e)=>setValue(e.target.value)}></input></div></>)
} export default App

在输入框中输入“张三”,hooks中的State也随之改变
在这里插入图片描述
要点一:set函数是异步的,调用set函数后,不能立即获取最新的值

const [count,setCount] = useState(0)
const handlerClick = () => {setCount(count+1)console.log(count)//打印为0
}
const getCount = ()=>{console.log(count,"count")
}return (<><div>count:{count}</div><button onClick={handlerClick}>+</button><button onClick={getCount}>获取set之后数据</button></>)

先点击加号按钮,会打印出“0”,随后点击获取set之后数据按钮,打印出count为1,说明点击获取set之后数据按钮时获取到了最新值。

注意事项1:set函数不会改变正在运行的代码的状态

set函数是异步的,调用set函数后,不能立即获取最新的值。


const [count,setCount] = useState(0)function handleClick() {console.log(count);  // 0setCount(count + 1); // 重新渲染console.log(count);  // 打印 0!setTimeout(() => {console.log(count); // 打印 0!}, 5000);
}return (<div>count:{count}</div><button onClick={handleClick}>+</button>
)

这是因为状态的行为类似于快照。更新状态会请求使用新状态值进行另一次渲染,但不会影响count已在运行的事件处理程序中的 JavaScript 变量。

状态变量可能看起来像您可以读取和写入的常规 JavaScript 变量。但是,状态的行为更像是快照。设置它不会更改已有的状态变量,而是触发重新渲染。

如果需要更新后的状态,可以提前设置一个变量。

const nextCount = count + 1;
setCount(nextCount);console.log(count);     // 0
console.log(nextCount); // 1

注意事项2:set函数自动批量处理

React 18之前只会在只在合成事件与钩子函数中自动批量处理,在promise、setTimeout或js原生事件中,都不会进行批处理。

React 18之后,默认所有的更新都会自动批量处理,只渲染一次。**更新多个状态变量(甚至来自多个组件),不会触发太多重新渲染,在事件处理程序及其中的任何代码完成后,UI 才会更新。

设置状态只会在下一次渲染时更改它。在第一次渲染期间,info 为{ name: “张三”, age: 1 },这就是为什么在该渲染的onClick处理程序中,即使调用了setInfo,info的值依然为{ name: “张三”, age: 1 }

React等待事件处理程序中的所有代码运行完毕后再处理状态更新。这就是为什么重新渲染只发生在所有这些setInfo()调用之后。

	const [info, setInfo] = useState({ name: "张三", age: 1 })const handlerClick = () => {setTimeout(() => {setInfo({ ...info, name: "里斯" })setInfo({ ...info, name: "1" })setInfo({ ...info, name: "2" })setInfo({ ...info, name: "3" })setInfo({ ...info, name: "4" })setInfo({ ...info, name: "5" })setInfo({ ...info, name: "6" })setInfo({ ...info, name: "7" })setInfo({ ...info, name: "8" })setInfo({ ...info, name: "9" })setInfo({ ...info, name: "10" })setInfo({ ...info, name: "11" })setInfo({ ...info, age: "12" })}, 0)}

页面中显示为name-张三 age-12,只有age改变,name没有改变

注意事项3:在下次渲染之前多次更新同一状态

传递一个根据队列中的前一个状态计算下一个状态的函数setNumber(n => n + 1),比如。这是一种告诉 React “对状态值做一些事情”而不是仅仅替换它的方法。
这里,n => n + 1称为更新函数。当您将其传递给状态设置器时:

React 将此函数排队,以便在事件处理程序中的所有其他代码运行完毕后进行处理。
在下一次渲染期间,React 会遍历队列并提供最终更新的状态。

const [info, setInfo] = useState({ name: "张三", age: 1 })
setTimeout(() => {setInfo((n)=>({ ...n, name: "里斯" }))setInfo((n)=>({ ...n, age: 0 }))
}, 0)

页面中显示为name-里斯 age-0,name和age都改变

最后

ONLYOFFICE发布了一个插件比赛,面向所有人,为 ONLYOFFICE 开发适合中国用户的插件,可赢取税前5500 - 10000元的结项奖金与证书:https://mp.weixin.qq.com/s/DE1-n8fMli5PueCp4m-_KQ

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

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

相关文章

实现基于Spring Security的权限管理系统

实现基于Spring Security的权限管理系统 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代Web应用中&#xff0c;权限管理系统是至关重要的组成部分。通过…

[数据集][目标检测]护目镜检测数据集VOC+YOLO格式888张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;888 标注数量(xml文件个数)&#xff1a;888 标注数量(txt文件个数)&#xff1a;888 标注类别…

ORB 特征点提取

FAST关键点 选取像素p&#xff0c;假设它的亮度为Ip&#xff1b; . 设置一个阈值T&#xff08;比如Ip的20%&#xff09;&#xff1b; 以像素p为中心&#xff0c;选取半径为3的圆上的16个像素点&#xff1b; 假如选取的圆上&#xff0c;有连续的N个点的亮度大于IpT或小于…

Redis 八股文

标题 1. Redis主从同步原理&#xff1a;判断下线的条件:故障转移如何保证Sentinel高可用 1. Redis主从同步原理&#xff1a; 1、slave执行命令向master建立连接 2、master执行bgsave&#xff08;后台存储&#xff09;&#xff0c;生成rdb快照&#xff08;redis备份方式&#x…

FreeRTOS中vTaskDelay 和 xTaskDelayUntil 的区别?

vTaskDelay 和 xTaskDelayUntil 是 FreeRTOS 提供的两种不同任务延迟函数&#xff0c;各自有其适用的场景和优缺点。vTaskDelay 适用于简单的延迟操作&#xff0c;而 xTaskDelayUntil 提供了精确的周期控制能力。在设计 FreeRTOS 应用程序时&#xff0c;根据任务的时间要求选择…

日志自动分析-Web---360星图GoaccessALBAnolog

目录 1、Web-360星图(IIS/Apache/Nginx) 2、Web-GoAccess &#xff08;任何自定义日志格式字符串&#xff09; 源码及使用手册 安装goaccess 使用 输出 3-Web-自写脚本&#xff08;任何自定义日志格式字符串&#xff09; 4、Web-机器语言analog&#xff08;任何自定义日…

游戏AI的创造思路-技术基础-强化学习(1)

我们“强化”一下机器的“学习”&#xff0c;让机器变得更强~~~~ 目录 1. 强化学习的定义 2. 发展历史 3. 强化学习的基本概念和函数 3.1. 基本概念和函数 3.1.1. 基本概念和函数 3.1.2. Q函数 3.1.2.1. 定义与作用 3.1.2.2. 数学表示 3.1.2.3. 更新规则 3.1.2.4. 算…

AI时代算法面试:揭秘高频算法问题与解答策略

三种决策树算法的特点和区别 ID3算法&#xff1a;基本的决策树算法&#xff0c;适用于简单的分类问题C4.5算法&#xff1a;改进了ID3算法&#xff0c;适用于更复杂的分类问题&#xff0c;可以处理连续型数据和缺失值CART算法&#xff1a;更加通用的决策树算法&#xff0c;适用于…

云服务器在 Web 应用程序中作用

云服务器在Web应用程序中扮演着至关重要的角色&#xff0c;它不仅是现代Web应用程序的基石&#xff0c;还是推动业务发展和提升用户体验的关键技术之一。下面将详细探讨云服务器在Web应用程序中的重要作用及其优势。 首先&#xff0c;云服务器为Web应用程序提供了高度可扩展的…

【postgresql】索引

见的索引类型&#xff1a; B-tree 索引&#xff1a;这是最常用的索引类型&#xff0c;适用于大多数查询。B-tree索引可以高效地处理范围查询。 Hash 索引&#xff1a;适用于等值查询&#xff0c;但不支持范围查询。 GiST 索引&#xff1a;通用搜索树&#xff08;GiST&#xf…

Flask自定义命令

Flask自定义命令 一、老版Flask自定义命令 Flask 1.x 和 2.x 版本 在Flask的老版本中&#xff0c;可以通过 flask-script 扩展来添加自定义命令。 安装所需库&#xff1a; pip3 install Flask-Script2.0.3 pip3 install flask1.1.4 pip3 install markupsafe1.1.1在 Flask 应…

怀念旧的Windows声音?以下是如何在Windows 11中恢复它们

如果你渴望旧的Windows声音,希望能在Windows 11上再次听到,那你就很幸运了。我们将向你展示如何下载必要的声音包并创建复古的声音方案。 如何获取旧Windows声音的声音包 你需要做的第一件事是下载一个包含旧Windows版本声音的声音包。此外,请确保它包含的每个声音都是WAV…

在 Vue 项目中使用 FullCalendar

1、先安装依赖包&#xff0c;根据自己的需求安装&#xff0c;建议使用cnpm安装&#xff0c;不然会很慢有时候会出现安装不上的情况。 npm i fullcalendar/vue --save npm i fullcalendar/core --save // 在月视图或日视图中操作事件 npm i fullcalendar/daygrid --save // 在…

记录discuz修改用户的主题出售价格

大家好&#xff0c;我是网创有方的站长&#xff0c;今天遇到了需要修改discuz的主题出售价格。特此记录下 方法很简单&#xff1a; 进入用于组-》选择论坛-》批量修改

【shell编程小项目】

目录 一、项目拓扑二、要求三、shell编程 一、项目拓扑 二、要求 环境准备&#xff1a; 准备两个虚拟机&#xff0c;按照环境配置好对应的 IP 地址和对应的主机名和 SSH 密钥登录在 workstation.exam.com 节点实现如下需求&#xff1a; 1、编写 Shell 脚本&#xff0c;要求代码…

0803实操-Windows Server系统管理

Windows Server系统管理 系统管理与基础配置 查看系统信息、更改计算机名称 网络配置 启用网络发现 Windows启用网络发现是指在网络设置中启用一个功能&#xff0c;该功能允许您的计算机在网络上识别和访问其他设备和计算机。具体来说&#xff0c;启用网络发现后&#xff…

Qt5.9.9 关于界面拖动导致QModbusRTU(QModbusTCP没有测试过)离线的问题

问题锁定 参考网友的思路&#xff1a; Qt5.9 Modbus request timeout 0x5异常解决 网友认为是Qt的bug&#xff0c; 我也认同&#xff1b;网友认为可以更新模块&#xff0c; 我也认同&#xff0c; 我也编译了Qt5.15.0的code并成功安装到Qt5.9.9中进行使用&#xff0c;界面拖…

Laravel文件存储:云端数据管理的艺术

标题&#xff1a;Laravel文件存储&#xff1a;云端数据管理的艺术 Laravel框架提供了一个强大的文件存储抽象层&#xff0c;允许开发者以一致的方式与本地磁盘或云存储服务&#xff08;如Amazon S3&#xff09;进行交互。文件存储系统简化了文件上传、下载、移动和删除等操作&…

Java面试之Java多线程常见面试题

1、什么是线程&#xff1f; 定义&#xff1a;线程是程序中的执行路径&#xff0c;是操作系统进行调度的基本单位。它允许程序并发执行多个任务&#xff0c;提高程序的响应速度和资源利用率。 2、为什么需要线程&#xff1f; 1、提高并发性&#xff1a;线程允许程序同时执行多…

Mybatis原生使用

一、MyBatis初次使用 2.1 环境搭建步骤 MyBatis 的 API &#xff1a; https://mybatis.org/mybatis-3/zh/getting-started.html 1.引入依赖包 2.准备核心配置件 db.properties drivercom.mysql.cj.jdbc.Driver urljdbc:mysql://123.57.206.19:3306/demo?useUnicodetrue&am…