react 之 useState

news2025/1/15 6:23:22

参考:https://blog.csdn.net/Ljwen_/article/details/125319191

一、基本使用

useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下:

const [count, setCount] = useState(initialCount)

它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改;
initialCount 是我们传入的一个初始状态,它是惰性的,我们可以通过传一个函数来返回一个值当作初始状态,并且这个函数只会在初始渲染时执行一次;

const [count, setCount] = useState(() => {
    const initialCount = someExpensiveComputation();
    return initialCount
})

接下来把定义好的状态运用到页面:

import { useState } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count + 1)
        // 传入一个函数,更新的值是基于之前的值来执行
        // setCount(count => count + 1)
    }
    return (
    	<div>
        	<h4>count: {count}</h4>
            <button onClick={ handleClick }>点击更新状态</button>
        </div>
    )
}

页面渲染完成后,我们可以看到 count的值是 0,当我们点击按钮时,会将 count的值加 1,页面也同时更新;
在这里插入图片描述

了解完基础用法后,我们可以思考几个问题;

setCount修改值时它是同步还是异步?
连续调用 setCount会发生什么?
第一个问题:setCount修改值时它是同步还是异步?

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count => count + 1)
    console.log("value2: ", count)
}

在这里插入图片描述

从图中我们可以看出,页面的值是更新了,但是控制台打印的是之前的值,这是不是也表示 setCount是异步的呢?我们换一种方法,用异步来修改状态;

const handleClick = () => {
    console.log("value1: ", count)
    setTimeout(() => {
        setCount(count => count + 1)
        console.log("value2: ", count)
    }, 0)
}

在这里插入图片描述

显然,异步修改状态跟同步修改状态的结果是一致的,这也表明了 setCount 是异步更新的;那我们要怎么拿到更新后的值呢,我们可以用另外一个 hook 函数 useRef,代码如下:

function App() {
  const [count, setCount] = useState(0)
  const countRef = useRef(count)
  countRef.current = count
  const handleClick = () => {
    setCount(count => count + 1)
    console.log("value3: ", count)
    setTimeout(() => {
      console.log(countRef.current)
    }, 0)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

在这里插入图片描述

从图中我们可以看出,我们已经拿到了更新之后的值,useRef不仅可以用于访问 DOM 节点,也可以用来表示一个容器,current属性可以保存任何值,而且useRef返回的对象会在整个生命周期内保持;

第二个问题:连续调用 setCount会发生什么?

(1)传入一个基于状态的值

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count + 1)
    console.log("value2: ", count)
    setCount(count + 1)
    console.log("value3: ", count)
}

在这里插入图片描述

从图片可以看出,如果我们传入的是一个普通值,他只会进行最后一次更新;

(2)传入一个函数

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count => count + 1)
    console.log("value2: ", count)
    setCount(count => count + 1)
    console.log("value3: ", count)
}

在这里插入图片描述

可以看出,传入一个函数的话,它会进行两次赋值,因为它更新的值是基于之前的值来执行,所以在开发中推荐使用函数传入的形式进行修改;

二、注意事项

1、复杂变量的修改

对于复杂类型的变量我们修改时需要重新定义,在原来数据的基础上修改不会引起组件的重新渲染,因为 React 组件的更新机制只进行浅对比,也就是更新某个复杂类型数据时只要它的引用地址没变,就不会重新渲染组件;举个例子

function App() {
    const [arr, setArr] = useState([1])
    const pushData = () => {
        arr.push(4)
        setArr(arr)
    }
    return (
        <div>
            <h4>{arr.join("-")}</h4>
            <button onClick={pushData}>点击添加数组</button>
        </div>
    )
}

上面的代码在点击按钮时,视图不会发生变化,但是 arr的值是变化了,如果想修改这个数组,需要重新定义一个数组来修改,在原数组上的修改不会引起组件的重新渲染,React 组件的更新机制对只进行浅对比,也就是更新某个复杂类型数据时只要它的引用地址没变,就不会重新渲染组件;

const pushData = () => {
    setArr([...arr, 4])
}

2、异步操作获取更新的值

在类组件里面,修改值时异步操作可以拿到更新后的值,但是在函数组件,异步获取是拿不到更新后的值的,举个例子对比一下:

类组件

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }
    handleClick = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count)
        setTimeout(() => {
            console.log(this.state.count)
        })
    }
    render() {
        return (
            <>
            <h4>count: {this.state.count}</h4>
            <button onClick={this.handleClick}>点击更新状态</button>
            </>
        );
    }
}

在这里插入图片描述

函数组件

function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count => count + 1)
        console.log("value1: ", count)
        setTimeout(() => {
            console.log("value2: ", count)
        })
    }
    return (
        <div>
            <h4>count: {count}</h4>
            <button onClick={handleClick}>点击更新状态</button>
        </div>
    )
}

在这里插入图片描述

显然,在函数组件中是不能通过异步来获取更新的值,我们可以通过 useRef来获取;

const countRef = useRef(count)
countRef.current = count
const handleClick = () => {
    setCount(count => count + 1)
    console.log("value1: ", countRef.current)
    setTimeout(() => {
        console.log("value2: ", countRef.current)
    })
}

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

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

相关文章

R语言ggplot2 | 绘制随机森林重要性+相关性热图

&#x1f4cb;文章目录 原图复现准备数据集及数据处理构建不同分类随机森林模型的并行计算绘制随机森林变量重要性柱状图计算数据集的相关性热图可视化合并随机森林重要性和热图 附上所有代码 在文献中&#xff0c;我们经常遇到随机森林和相关性热图的组合图片(下图)&#xff0…

LeetCode热题HOT100:76. 最小覆盖子串,84.柱状图中最大的矩形、96. 不同的二叉搜索树

LeetCode 热题 HOT 100 76. 最小覆盖子串 题目&#xff1a;给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 “” 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字…

Ubuntu18.04获取root权限并用root用户登录

写在前面&#xff1a;以下步骤中需要在终端输入命令&#xff0c;电脑端查看博客的朋友可以直接复制粘贴到终端&#xff0c;手机端查看的朋友请注意命令里面的空格是必须的&#xff0c;否则运行会出错。 1.为root设置初始密码 &#xff08;1&#xff09;登录系统&#xff0c;打…

【unity实战】随机地下城生成1

先看看最终效果 导入素材 导入房间图片素材,配置图片信息信息 点击sprite Editor,开始切割图片 随机创建基本房间 已一个白底图片模拟房间预设体 思路:建立一个空的 GameObject 用来做创建房间的点,设置坐标(0,0,0)。每创建1个房间之后,随机在上、下、右判断是否有…

python以及PyCharm工具的环境安装与配置

这里以Windows为例 Python的安装 当然是到Python官网下载咯&#xff0c;https://www.python.org/downloads/点我直达&#xff0c;如图&#xff1a; 可以下载最新版本&#xff0c;可以下拉找到之前特定的版本安装&#xff0c;如图&#xff1a; 这里先择的是最新版的进行安装…

leetcode每日一题:链表专题篇第一期(1/2)

&#x1f61a;一个不甘平凡的普通人&#xff0c;日更算法学习和打卡&#xff0c;期待您的关注和认可&#xff0c;陪您一起学习打卡&#xff01;&#xff01;&#xff01;&#x1f618;&#x1f618;&#x1f618; &#x1f917;专栏&#xff1a;每日算法学习 &#x1f4ac;个人…

现在备考2023年5月软考网络工程师时间够吗?

距离2023年5月软考还有1个多月的时间&#xff0c;备考网络工程师的时间是够的&#xff0c;以下是一些备考方法&#xff1a; 1.了解考试内容 在你开始学习考试之前&#xff0c;了解考试的形式和内容是很重要的。这将帮助你把注意力集中在最有可能被测试的领域。你应该复习考试…

Gartner Magic Quadrant for SD-WAN 2022 (Gartner 魔力象限:软件定义广域网 2022)

Gartner 魔力象限&#xff1a;SD-WAN 2022 请访问原文链接&#xff1a;https://sysin.org/blog/gartner-magic-quadrant-sd-wan-2022/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Gartner 魔力象限&#xff1a;SD-WAN 2022…

ChatGPT最强竞争对手,无需魔法,直接使用

无需科学上网&#xff0c;无需加入Waitlist&#xff0c;免费使用&#xff0c;没有高峰限制&#xff0c;而且效果媲美ChatGPT&#xff01; ChatGPT 的最强竞争对手Claude!!! Claude 是由Anthropic这家人工智能公司开发出来的&#xff0c;其联合创始人Dario Amodei曾经担任OpenAI…

K8S使用持久化卷存储到NFS(NAS盘)

参考文章&#xff1a;K8S-v1.20中使用PVC持久卷 - 知乎 Persistent Volumes&#xff1a;PV是持久化卷&#xff0c;系统管理员设置的存储&#xff0c;它是群集的一部分&#xff0c;是一种资源&#xff0c;所以它有独立于Pod的生命周期 Persistent Volume Claim&#xff1a;PVC…

抽象同步队列AbstractQueuedSynchronizer(AQS)简要理解

抽象同步队列AbstractQueuedSynchronizer AQS 简要理解 1 什么是AQS2 AQS结构2.1 同步状态2.2 CLH队列2.3 Node 3 AQS流程 https://zhuanlan.zhihu.com/p/370501087 1 什么是AQS AQS&#xff08;AbstractQueuedSynchronizer&#xff09;是 Java 中实现锁和同步器的基础设施&am…

el-input-number中添加单位(css版)

优点: 通过css添加,非常便捷和简单 例如此处,需要添加一个分钟单位 <el-input-number class"input-number" v-model"value" :step"5" :min"30" ></el-input-number> //css <style lang"scss"> .input-nu…

node项目(一) koa脚手架的搭建

一、koa 安装 // 安装koa npm install -g koa-generator // 创建项目 koa2 项目名称 当出现这个框的时候安装完毕 之后就是进入目录文件&#xff0c;根据package.json执行即可 二、出现问题 汇总 问题一&#xff1a;koa-generator安装失败 没有出现koa-generator安装成功 …

分类预测 | MATLAB实现BO-CNN-GRU贝叶斯优化卷积门控循环单元多输入分类预测

分类预测 | MATLAB实现BO-CNN-GRU贝叶斯优化卷积门控循环单元多输入分类预测 目录 分类预测 | MATLAB实现BO-CNN-GRU贝叶斯优化卷积门控循环单元多输入分类预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 基于贝叶斯(bayes)优化卷积神经网络-门控循环单元(CN…

4月第2周榜单丨飞瓜数据B站UP主排行榜(哔哩哔哩平台)发布!

飞瓜轻数发布2023年4月10日-4月16日飞瓜数据UP主排行榜&#xff08;B站平台&#xff09;&#xff0c;通过充电数、涨粉数、成长指数三个维度来体现UP主账号成长的情况&#xff0c;为用户提供B站号综合价值的数据参考&#xff0c;根据UP主成长情况用户能够快速找到运营能力强的B…

Linux进程概念——其一

目录 冯诺依曼体系结构 操作系统(Operator System) 概念 设计OS的目的 定位 如何理解 "管理" 总结 系统调用和库函数概念 进程 基本概念 描述进程-PCB task_struct-PCB的一种 task_ struct内容分类 组织进程 查看进程 通过系统调用获取进程标示符 通…

Docker Desktop 占用过多C盘存储空间的一种解决办法——在其他磁盘分区添加访问路径

一、问题背景 Docker Desktop默认是安装到C盘中的。但随着Docker的使用&#xff0c;其占用的空间也越来越大&#xff0c;Docker占用C盘空间过大成了个令人头疼的问题。恰好最近腾出了一个空的磁盘分区&#xff0c;因此可以使用“在其他磁盘分区添加访问路径”的方式&#xff0c…

03-Mybatis的基本使用-注解配置文件+xml配置文件

目录 1、环境准备 2、注解配置文件 基础操作01-通过ID删除数据 基础操作02-插入数据 基础操作03-更新数据 基础操作04-根据ID查询数据 基础操作05-条件查询数据 3、xml配置文件 1、环境准备 1. 创建数据库数据表 -- 部门管理 create table dept(id int unsigned prim…

【数据篇】SpringBoot 整合 MyBatis 组合 Redis 作为数据源缓存

写在最前 MyBatis 是常见的 Java 数据库访问层框架。在日常工作中&#xff0c;开发人员多数情况下是使用 MyBatis 的默认缓存配置&#xff0c;但是 MyBatis 缓存机制有一些不足之处&#xff0c;在使用中容易引起脏数据&#xff0c;形成一些潜在的隐患。 本文介绍的是 Redis 组…

版本控制工具之git安装

作为软件开发者的必备工具——版本控制工具&#xff0c;git无疑深受欢迎。 业界常用的版本控制工具主要有两种&#xff1a;SVN和Git SVN 传统的版本控制工具&#xff0c;特点为集中式分布。 使用一台专用的服务器存储所有资料。 缺点是所有的动作都必须依赖于中央服务器&#x…