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

React-useState讲解

useState

让页面“动”起来

例如实现一个 click 计数功能,普通变量无法实现。即:修改普通变量无法触发组件的更新 rerender

通过 useState 即可实现。

state 是什么

State, A component’s memory —— 这个比喻非常好!

  • props 父组件传递过来的信息
  • state 组件自己内部的状态,不对外

每次 state 变化,都会触发组件更新,从新渲染页面。

代码演示,参考 react-ts-demo 中 pages/StateDemo1.tsx

import React, { FC, useState } from 'react'const Demo: FC = () => {// let count = 0 // 普通的 js 变量,无法触发组件的更新const [count, setCount] = useState(0) // useState 可以触发组件的更新,//   const [name, setName] = useState('双越')function add() {// count++// setCount(count + 1)setCount(count => count + 1) // 使用函数,state 更新不会被合并setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)// setCount(count => count + 1)console.log('cur count ', count) // 异步更新,无法直接拿到最新的 state 值}return (<div><button onClick={add}>add {count}</button></div>)
}export default Demo

state 的特点

异步更新

代码演示

PS:setState 传入函数,可同步更新

可能会被合并

代码演示

不可变数据

state 可以是任意 JS 类型,不仅仅是值类型。

不可直接修改 state ,而要 setState 新值。

代码演示

PS:函数组件,每个更新函数从新执行,state 被重置,而不是被修改。state 可以理解为 readOnly

immer

Immer 简化了不可变数据结构的处理。特别是对于 JS 语法没那么熟悉的人。

代码演示,参考 react-ts-demo 中 pages/ImmerDemo1.tsx

import React, { FC, useState } from 'react'
import produce from 'immer'const Demo: FC = () => {//   const [userInfo, setUserInfo] = useState({ name: '柚子', age: 20 })//   function changeAge() {//     // // **不可变数据** - 不去修改 state 的值,而是要传入一个新的值 —— 重要!//     // setUserInfo({//     //   ...userInfo,//     //   age: 21,//     // })//     setUserInfo(//       produce(draft => {//         draft.age = 21//       })//     )//   }const [list, setList] = useState(['x', 'y'])function addItem() {// // **不可变数据** - 不去修改 state 的值,而是要传入一个新的值 —— 重要!// setList(list.concat('z'))// // setList([...list, 'z'])setList(produce(draft => {draft.push('z')}))}return (<div><h2>state 不可变数据</h2>{/* <div>{JSON.stringify(userInfo)}</div><button onClick={changeAge}>change age</button> */}<div>{JSON.stringify(list)}</div><button onClick={addItem}>add item</button></div>)
}export default Demo

实战:List 页面使用 state

  • 使用 state
  • 使用 immer
    • push
    • 修改 isPublish

代码参考 pages/List2.tsx

import React, { FC, useState, useEffect } from 'react'
import produce from 'immer'
import QuestionCard from './components/QuestionCard'// 组件是一个函数(执行返回 JSX 片段),组件初次渲染执行这个函数
// 任何 state 更新,都会触发组件的更新(重新执行函数)
const List2: FC = () => {useEffect(() => {console.log('加载 ajax 网络请求')return () => {console.log('销毁')}}, []) // 无依赖,组件初次渲染时执行// const [count, setCount] = useState(0)const [questionList, setQuestionList] = useState([{ id: 'q1', title: '问卷1', isPublished: false },{ id: 'q2', title: '问卷2', isPublished: true },{ id: 'q3', title: '问卷3', isPublished: false },{ id: 'q4', title: '问卷4', isPublished: true },])// useEffect(() => {//   console.log('question list changed')// }, [questionList])// useEffect(() => {//   console.log('count changed')// }, [count, questionList])function add() {// setCount(count + 1)const r = Math.random().toString().slice(-3)// setQuestionList(//   // 新增 concat//   questionList.concat({//     id: 'q' + r,//     title: '问卷' + r,//     isPublished: false,//   })// )// immer 的方式setQuestionList(produce(draft => {draft.push({id: 'q' + r,title: '问卷' + r,isPublished: false,})}))}function deleteQuestion(id: string) {// // 不可变数据// setQuestionList(//   // 删除 filter//   questionList.filter(q => {//     if (q.id === id) return false//     else return true//   })// )// immer 的方式setQuestionList(produce(draft => {const index = draft.findIndex(q => q.id === id)draft.splice(index, 1)}))}function publishQuestion(id: string) {// setQuestionList(//   // 修改 map//   questionList.map(q => {//     if (q.id !== id) return q//     return {//       ...q,//       isPublished: true,//     }//   })// )// immer 的方式setQuestionList(produce(draft => {const q = draft.find(item => item.id === id)if (q) q.isPublished = true}))}return (<div><h1>问卷列表页2</h1><div>{questionList.map(question => {const { id, title, isPublished } = questionreturn (<QuestionCardkey={id}id={id}title={title}isPublished={isPublished}deleteQuestion={deleteQuestion}publishQuestion={publishQuestion}/>)})}</div><div><button onClick={add}>新增问卷</button></div></div>)
}export default List2

代码参考 /components/QuestionCard

import React, { FC, useEffect } from 'react'
import classnames from 'classnames'
// import './QuestionCard.css'
import styles from './QuestionCard.module.scss'// ts 自定义类型
type PropsType = {id: stringtitle: stringisPublished: booleandeleteQuestion?: (id: string) => voidpublishQuestion?: (id: string) => void
}// FC - functional component
const QuestionCard: FC<PropsType> = props => {const { id, title, isPublished, deleteQuestion, publishQuestion } = propsfunction publish(id: string) {publishQuestion && publishQuestion(id)}function del(id: string) {deleteQuestion && deleteQuestion(id)}// useEffect(() => {//   console.log('question card mounted')//   return () => {//     console.log('question card unmounted', id) // 销毁//   }//   // 生命周期:创建,更新(state 变化),销毁// }, [])// let itemClassName = 'list-item'// if (isPublished) itemClassName += ' published'// // 逻辑稍微复杂// const itemClassName = classnames('list-item', { published: isPublished })// const itemClassName = classnames({//   'list-item': true,//   published: isPublished,// })const listItemClass = styles['list-item']const publishedClass = styles.publishedconst itemClassName = classnames({[listItemClass]: true,[publishedClass]: isPublished,})return (<div key={id} className={itemClassName}><strong>{title}</strong>&nbsp;{/* 条件判断 */}{isPublished ? <span className={styles['published-span']}>已发布</span> : <span>未发布</span>}&nbsp;<buttononClick={() => {publish(id)}}>发布问卷</button>&nbsp;<buttononClick={() => {del(id)}}>删除问卷</button></div>)
}export default QuestionCard

最重要的就是:不可变数据 —— 这是 React state 的核心

相关文章:

React-useState讲解

useState 让页面“动”起来 例如实现一个 click 计数功能&#xff0c;普通变量无法实现。即&#xff1a;修改普通变量无法触发组件的更新 rerender 通过 useState 即可实现。 state 是什么 State, A component’s memory —— 这个比喻非常好&#xff01; props 父组件传…...

混币器是什么,波卡跨链交易平台

混币器是什么 混币器是一种加密货币工具,主要功能是将用户的加密货币与其他众多用户的加密货币混合在一起,打乱资金的流向和交易痕迹,使得加密货币的来源和去向难以追踪,从而增加交易的匿名性和隐私性。以下是对其工作流程和相关举例的介绍: 工作流程 用户首先将自己的加…...

【PHP】双方接口通信校验服务

请求方 使用 ApiAuthService::buildUrl($domain, [terminal > 1, ts > time()]); //http://域名/adminapi/login/platformLogin?signF7FE8A150DEC18BE8A71C5059742C81A&terminal1&ts1736904841接收方 $getParams $this->request->get();$validate ApiA…...

Web第一次作业

目录 题目 html代码 index login register css代码 base index login register 效果展示 index login register 题目 实现一个登录页面、实现一个注册页面&#xff1b;实现一个主页 - 登录页面&#xff1a;login.html - 注册页面&#xff1a;register.html - 主页…...

CentOS 6.8 安装 Nginx

个人博客地址&#xff1a;CentOS 6.8 安装 Nginx | 一张假钞的真实世界 提前安装&#xff1a; # sudo yum install yum-utils 一般情况下这个工具系统已经安装。 创建文件/etc/yum.repos.d/nginx.repo&#xff0c;输入内容如下&#xff1a; [nginx-stable] namenginx stab…...

网络网络层ICMP协议

网络网络层ICMP协议 1. ICMP 协议介绍 ICMP&#xff08;Internet Control Message Protocol&#xff09;是 TCP/IP 协议簇中的网络层控制报文协议。用于在 IP 主机、路由器之间传递控制消息&#xff0c;提供可能有关通信问题的反馈信息。 以及用于网络诊断或调试&#xff08;…...

当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (css 样式问题)

一、问题 遇到个样式问题&#xff0c;当父级元素设置了flex 布局 &#xff0c;两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 &#xff08;拖拽浏览器 使页面变小&#xff09; 二、解决方法 .father{min-height: 600px;width: 100%;display: flex…...

Vue.js组件开发-如何实现路由懒加载

在Vue.js应用中&#xff0c;路由懒加载是一种优化性能的技术&#xff0c;它允许在需要时才加载特定的路由组件&#xff0c;而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间&#xff0c;提高用户体验。在Vue Router中&#xff0c;实现路由懒加载非常简单&#xf…...

灵活妙想学数学

灵活妙想学数学 题1&#xff1a;海星有几只&#xff1f; 一共有12只海洋生物&#xff0c;分别是5只脚的海星&#xff0c;8只脚的章鱼和10只脚的鱿鱼&#xff0c;这些海洋动物的脚一共有87只&#xff0c;每种生物至少有1只&#xff0c;问海星有几只&#xff1f; 解&#xff1a…...

使用 Multer 上传图片到阿里云 OSS的两种方式

文件上传到哪里更好&#xff1f; 上传到服务器本地 上传到服务器本地&#xff0c;这种方法在现今商业项目中&#xff0c;几乎已经见不到了。因为服务器带宽&#xff0c;磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上&#xff0c;并不是明智的选择。 上传到云储存…...

破解合同管理之痛,开启智能化管理新模式

合同管理是采购管理中的一项重要环节&#xff0c;涉及合同洽谈、草拟、签订、生效、履行、失效全过程。随着企业业务规模的发展壮大&#xff0c;企业与各类供应商之间的合作往来更加频繁&#xff0c;需要签署和管理的合同文件也不断增多&#xff0c;如何提升合同管理效率成为企…...

Linux-day06

第14章 进程管理&#xff08;重点&#xff09; 进程基本介绍 程序运行起来就是一个进程 1.程序和进程的关系 2.在Linux中有两种方式执行&#xff0c;一种叫前台&#xff0c;一种后台 ps指令详解 显示系统执行的进程 USER&#xff1a;进程执行用户 PID&#xff1a;进程号 …...

源码编译安装httpd 2.4,提供系统服务管理脚本并测试

总结需要安装的包 sudo yum groupinstall "Development Tools" -y #httpd的依赖包yum install tar -y #tar压缩包sudo yum install apr-devel apr-util-devel #APR库 提供跨平台接口的库sudo yum install pcre pcre-devel # PCRE库和 pcre-config工具--提供PCRE库…...

Linux固定ip

进入etc/sysconfig/network-scripts目录 cd /etc/sysconfig/network-scripts 编辑ifcfg-ens33文件 vi ifcfg-ens33 将BOOTPROTO的值改为“static”&#xff0c;在文档最后添加需要的固定IP BOOTPROTO"static" IPADDR192.168.132.136点击按键“esc”&#xff0c;…...

Java 输入输出流(上)

目录 1.Java 输入输出流 2.Java File类 3.Java File类目录 1.创建目录 2.列出目录中的文件 4.Java File类文件 1.文件的创建与删除 2.运行可执行文件 5.Java 文件字节输入流(1) 6.Java 文件字节输入流(2) 1.使用输入流读取字节 2.关闭流 7.Java 文件字节输出流(1…...

mysql、oracle、sqlserver的区别

一、保存数据的持久性&#xff1a; MySQL&#xff1a;是在数据库更新或者重启&#xff0c;则会丢失数据。 Oracle&#xff1a;把提交的sql操作线写入了在线联机日志文件中&#xff0c;保持到了磁盘上&#xff0c;可以随时恢复。 SqlServer&#xff1a;2…...

Java+Maven+GDAL

下载已经编译好的压缩包&#xff0c;下载地址 解压 jar 包 release-1930-x64-dev.zip\release-1930-x64\bin\gdal\java 目录下 打成Maven依赖 mvn install:install-file -Dfilegdal-3.10.1.jar -DgroupIdorg.gdal -DartifactIdgdal -Dversion3.10.1 -Dpackagingjar -Dgener…...

初识算法和数据结构P1:保姆级图文详解

文章目录 前言1、算法例子1.1、查字典&#xff08;二分查找算法&#xff09;1.2、整理扑克&#xff08;插入排序算法&#xff09;1.3、货币找零&#xff08;贪心算法&#xff09; 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...

【Go】Go Gorm 详解

1. 概念 Gorm 官网&#xff1a;https://gorm.io/zh_CN/docs/ Gorm&#xff1a;The fantastic ORM library for Golang aims to be developer friendly&#xff0c;这是官网的介绍&#xff0c;简单来说 Gorm 就是一款高性能的 Golang ORM 库&#xff0c;便于开发人员提高效率 那…...

【IDEA版本升级JDK21报错方法引用无效 找不到符号】

java: 方法引用无效 找不到符号 符号: 方法 getFirst() 位置: 接口 java.util.List 升级JDK21版本遇到问题&#xff0c;报错找不到符号 但是点进去又能发现这个函数&#xff0c;证明能够找到这个方法&#xff0c;但是就是报错 java: 方法引用无效 找不到符号 符号: …...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...