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

【React】useState:状态管理的基石

文章目录

    • 一、什么是 useState?
    • 二、useState 的基本用法
    • 三、useState 的工作原理
    • 四、高级用法
    • 五、最佳实践

在现代前端开发中,React 是一个非常流行的库,而 useState 是 React 中最重要的 Hook 之一。useState 使得函数组件能够拥有自己的状态,从而替代了传统类组件中的状态管理方式。本文将详细介绍 useState 的基本用法、工作原理、高级技巧以及最佳实践,帮助开发者深入理解和高效使用 useState 进行状态管理。

一、什么是 useState?

useState 是 React 提供的一个 Hook,用于在函数组件中添加状态管理功能。它允许我们在函数组件中声明状态变量,并通过函数形式更新状态。与类组件中的 this.statethis.setState 类似,useState 提供了一种简单而直观的方式来管理组件的状态。

二、useState 的基本用法

  1. 导入 useState

    首先,我们需要从 React 中导入 useState

    import React, { useState } from 'react';
    
  2. 初始化状态

    使用 useState 初始化状态时,我们需要传递一个初始值useState 返回一个数组,第一个元素是当前状态值,第二个元素是更新状态的函数。

    function Counter() {const [count, setCount] = useState(0);return (<div><p>计数: {count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
    }
    

    在这个例子中,useState(0) 初始化了一个名为 count 的状态变量,初始值为 0。setCount 是一个函数,用于更新 count 的值。当按钮被点击时,setCount 会将 count 的值加 1。

三、useState 的工作原理

useState 是 React Hook 中最基础的一个,它的工作原理可以概括为以下几点:

  1. 状态持久化

    React 内部维护了一个状态池(state pool),用于存储每个组件的状态。当组件重新渲染时,React 会根据组件的顺序查找对应的状态值。

  2. 惰性初始化

    useState 支持惰性初始化,即初始状态可以通过一个函数来计算。这在需要进行复杂计算或昂贵操作时非常有用。

    const [count, setCount] = useState(() => {const initialCount = computeExpensiveValue();return initialCount;
    });
    
  3. 状态更新

    调用 setCount 更新状态时,React 会将新的状态值和旧的状态值进行对比。如果不同,则触发组件重新渲染。

四、高级用法

  1. 管理多个状态

    一个组件中可以使用多个 useState 来管理不同的状态变量。

    function UserInfo() {const [name, setName] = useState('');const [age, setAge] = useState(0);return (<div><inputtype="text"value={name}onChange={(e) => setName(e.target.value)}/><inputtype="number"value={age}onChange={(e) => setAge(Number(e.target.value))}/><p>名字: {name}</p><p>年龄: {age}</p></div>);
    }
    
  2. 对象状态

    如果状态是一个对象,可以使用 useState 处理对象状态。不过需要注意,setState 不会自动合并状态对象,所以更新对象状态时需要手动合并。

    function UserProfile() {const [user, setUser] = useState({ name: '', age: 0 });const updateName = (name) => {setUser((prevUser) => ({ ...prevUser, name }));};const updateAge = (age) => {setUser((prevUser) => ({ ...prevUser, age }));};return (<div><inputtype="text"value={user.name}onChange={(e) => updateName(e.target.value)}/><inputtype="number"value={user.age}onChange={(e) => updateAge(Number(e.target.value))}/><p>名字: {user.name}</p><p>年龄: {user.age}</p></div>);
    }
    
  3. 函数式更新

    当新的状态依赖于之前的状态时,使用函数式更新可以避免潜在的竞态条件。

    function Counter() {const [count, setCount] = useState(0);const increment = () => {setCount((prevCount) => prevCount + 1);};return (<div><p>计数: {count}</p><button onClick={increment}>增加</button></div>);
    }
    

五、最佳实践

  1. 状态命名

    选择具有描述性的名称,确保代码的可读性。例如,使用 countsetCount 而不是 valuesetValue

  2. 状态组织

    合理组织状态,避免状态过于分散或过于集中。一个组件中应该只管理与其功能相关的状态。

  3. 惰性初始化

    在需要复杂计算初始值时,使用惰性初始化提高性能。

  4. 避免不必要的状态

    状态应该只存储组件渲染所需的数据,避免存储可以通过计算得出的值。


在这里插入图片描述

相关文章:

【React】useState:状态管理的基石

文章目录 一、什么是 useState&#xff1f;二、useState 的基本用法三、useState 的工作原理四、高级用法五、最佳实践 在现代前端开发中&#xff0c;React 是一个非常流行的库&#xff0c;而 useState 是 React 中最重要的 Hook 之一。useState 使得函数组件能够拥有自己的状态…...

商品中心关于缓存热key的解决方案

缓存热key一旦被击穿&#xff0c;流量势必会打到数据库&#xff0c;如果数据库崩了&#xff0c;游戏直接结束。 从两点来讨论&#xff1a;如何监控、如何解决。 如何监控 通过业务评估&#xff1a;比如营销活动推出的商品或者热卖的商品。基于LRU的命令&#xff0c;redis-cl…...

【Python系列】Parquet 数据处理与合并:高效数据操作实践

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

大脑自组织神经网络通俗讲解

大脑自组织神经网络的核心概念 大脑自组织神经网络&#xff0c;是指大脑中的神经元通过自组织的方式形成复杂的网络结构&#xff0c;从而实现信息的处理和存储。这一过程涉及到神经元的生长、连接和重塑&#xff0c;是大脑学习和记忆的基础。其核心公式涉及神经网络的权重更新…...

org.springframework.context.annotation.DeferredImportSelector如何使用?

DeferredImportSelector 是 Spring 框架中一个比较高级的功能&#xff0c;主要用于在 Spring 应用上下文的配置阶段延迟导入某些组件或配置。这个功能特别有用&#xff0c;比如在处理依赖于其他自动配置的场景&#xff0c;或者当你想基于某些条件来决定是否导入特定的配置类时。…...

缓慢变化维

缓慢变化维 缓慢变化维&#xff08;Slowly Changing Dimensions&#xff0c;简称SCD&#xff09;是数据仓库中的一个重要概念&#xff0c;用于处理维度表中数据随时间发生的变化。以下是一个具体的例子来描述缓慢变化维&#xff1a; 假设我们有一个销售数据仓库&#xff0c;其…...

Vue常用的指令都有哪些?都有什么作用?什么是自定义指令?

常用指令&#xff1a; 1、v-model 多用于表单元素实现双向数据绑定 (同angular中的ng-model) 2、v-for格式&#xff1a; v-for"字段名in(of)数组json"循环数组或json(同angular中的ng repeat),需要注意从vue2开始取消了$index 3、v-show 4、v-hide 隐藏内容 (同a…...

kettle从入门到精通 第八十一课 ETL之kettle kettle中的json对象字段写入postgresql中的json字段正确姿势

1、上一节可讲解了如何将json数据写入pg数据库表中的json字段&#xff0c;虽然实现了效果&#xff0c;但若客户继续使用表输出步骤则仍然无法解决问题。 正确的的解决方式是设置数据库连接参数stringtypeunspecified 2、stringtypeunspecified 参数的作用&#xff1a; 当设置…...

计算机网络实验-RIP配置与分析

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、相关知识 路由信息协议&#xff08;Routing Information Protocol&#xff0c;RIP&#xff09;是一种基于距离向量&#xff08;Distance-Vector&…...

33.【C语言】实践扫雷游戏

预备知识&#xff1a; 第13篇 一维数组 第13.5篇 二维数组 第28篇 库函数 第29篇 自定义函数 第30篇 函数补充 0x1游戏的运行&#xff1a; 1.随机布置雷 2.排雷 基本规则&#xff1a; 点开一个格子后&#xff0c;显示1&#xff0c;对于9*9&#xff0c;代表以1为中心的去…...

git学习笔记(总结了常见命令与学习中遇到的问题和解决方法)

前言 最近学习完git&#xff0c;学习过程中也遇到了很多问题&#xff0c;这里给大家写一篇总结性的博客&#xff0c;主要大概讲述git命令和部分难点问题&#xff08;简单的知识点这里就不再重复讲解了&#xff09; 一.git概述 1.1什么是git Git是一个分布式的版本控制软件。…...

【计算机网络】TCP协议详解

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 1、引言2、udp和tcp协议的异同3、tcp服务器3.1、接口认识3.2、服务器设计 4、tcp客户端4.1、客户端设计4.2、说明 5、再研Tcp服务端5.1、多进程版5.2、多线程版 5、守护进程化5.1、什么是守护进程5.2…...

2.3 大模型硬件基础:AI芯片(上篇) —— 《带你自学大语言模型》系列

本系列目录 《带你自学大语言模型》系列部分目录及计划&#xff0c;完整版目录见&#xff1a;带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型&#xff08;科普向&#xff09; 第一章 走进大语言模型 1.1 从图灵机到GPT&#xff0c;人工智能经历了什么&#xff1…...

Java | Leetcode Java题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; class Solution {public int numSquares(int n) {if (isPerfectSquare(n)) {return 1;}if (checkAnswer4(n)) {return 4;}for (int i 1; i * i < n; i) {int j n - i * i;if (isPerfectSquare(j)) {return 2;}}return 3;}// 判断是否为…...

JS逆向高级爬虫

JS逆向高级爬虫 JS逆向的目的是通过运行本地JS的文件或者代码,以实现脱离他的网站和浏览器,并且还能拿到和浏览器加密一样的效果。 10.1、编码算法 【1】摘要算法&#xff1a;一切从MD5开始 MD5是一个非常常见的摘要(hash)逻辑. 其特点就是小巧. 速度快. 极难被破解. 所以,…...

基于Golang+Vue3快速搭建的博客系统

WANLI 博客系统 项目介绍 基于vue3和gin框架开发的前后端分离个人博客系统&#xff0c;包含md格式的文本编辑展示&#xff0c;点赞评论收藏&#xff0c;新闻热点&#xff0c;匿名聊天室&#xff0c;文章搜索等功能。 项目在线访问&#xff1a;http://bloggo.chat/ 访客账号…...

DVWA中命令执行漏洞细说

在攻击中&#xff0c;命令注入是比较常见的方式&#xff0c;今天我们细说在软件开发中如何避免命令执行漏洞 我们通过DVWA中不同的安全等级来细说命令执行漏洞 1、先调整DVWA的安全等级为Lower,调整等级在DVWA Security页面调整 2、在Command Injection页面输入127.0.0.1&…...

【YOLOv5/v7改进系列】引入中心化特征金字塔的EVC模块

一、导言 现有的特征金字塔方法过于关注层间特征交互而忽视了层内特征的调控。尽管有些方法尝试通过注意力机制或视觉变换器来学习紧凑的层内特征表示&#xff0c;但这些方法往往忽略了对密集预测任务非常重要的被忽视的角落区域。 为了解决这个问题&#xff0c;作者提出了CF…...

【QT】常用控件(概述、QWidget核心属性、按钮类控件、显示类控件、输入类控件、多元素控件、容器类控件、布局管理器)

一、控件概述 Widget 是 Qt 中的核心概念&#xff0c;英文原义是 “小部件”&#xff0c;此处也把它翻译为 “控件”。控件是构成一个图形化界面的基本要素。 像上述示例中的按钮、列表视图、树形视图、单行输入框、多行输入框、滚动条、下拉框都可以称为 “控件”。 Qt 作为…...

【Python】字母 Rangoli 图案

一、题目 You are given an integer N. Your task is to print an alphabet rangoli of size N. (Rangoli is a form of Indian folk art based on creation of patterns.) Different sizes of alphabet rangoli are shown below: # size 3 ----c---- --c-b-c-- c-b-a-b-c --…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...