React之setState

一、useState使用规则

1、useState 函数可以执行多次,每次执行互相独立,每调用一次为函数组件提供一个状态
2、useState只能出现在【函数组件】或者其他hook函数中
3、不能嵌套在if/for/其它函数中(react按照hooks的调用顺序识别每一个hook) 只能在最外层

二、setState-不可变值

import React from 'react'class StateDemo extends React.Component {constructor(props) {super(props)// 第一,state 要在构造函数中定义this.state = {count: 0}}increase = () => {// 第二,不要直接修改 state ,使用不可变值// this.state.count++ // 错误this.setState({count: this.state.count + 1 // √})}render() {return <div><p>{this.state.count}</p><button onClick={this.increase}>累加</button></div>}
}export default StateDemo

操作数组、对象的的常用形式

// 不可变值(函数式编程,纯函数) - 数组
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, 'a') // 中间插入/删除this.setState({list1: this.state.list1.concat(100), // 追加list2: [...this.state.list2, 100], // 追加list3: this.state.list3.slice(0, 3), // 截取list4: this.state.list4.filter(item => item > 100), // 筛选list5: list5Copy // 其他操作
})
// 注意,不能直接对 this.state.list 进行 push pop splice 等,这样违反不可变值// 不可变值 - 对象
this.setState({obj1: Object.assign({}, this.state.obj1, {a: 100}),obj2: {...this.state.obj2, a: 100}
})
// 注意,不能直接对 this.state.obj 进行属性设置,这样违反不可变值

三、setState-可能是异步更新

// 回调函数中可以拿到最新的 state

this.setState({count:this.state.count + 1
}, () => {// 联想 Vue $nextTick - DOMconsole.log('count by callback', this.state.count) // 回调函数中可以拿到最新的 state   !!!!!
})
console.log('count', this.state.count) // 异步的,拿不到最新值 xxxxxxxxxxxxxxx

setTimeout 中 setState 是同步的, 可以拿到最新的 state

setTimeout(() => {this.setState({count: this.state.count + 1})console.log('count in setTimeout', this.state.count)
}, 0)

自己定义的 DOM 事件,setState 是同步的。在 componentDidMount 中

bodyClickHandler = () => {this.setState({count: this.state.count + 1})console.log('count in body event', this.state.count) // 可以拿到最新的 state 
}
componentDidMount() {// 自己定义的 DOM 事件,setState 是同步的document.body.addEventListener('click', this.bodyClickHandler)
}
componentWillUnmount() {// 及时销毁自定义 DOM 事件document.body.removeEventListener('click', this.bodyClickHandler)// clearTimeout
}

四、setState-可能会被合并

传入对象,会被合并(类似 Object.assign )。执行结果只一次 +1 因为异步更新
Object.assign({aaa: 1}, {aaa: 1}) // {aaa: 1}

this.setState({count: this.state.count + 1
})
this.setState({count: this.state.count + 1
})
this.setState({count: this.state.count + 1
})

// 传入函数,不会被合并, 因为函数无法合并,是可执行的对象。执行结果是 +3

this.setState((prevState, props) => {return {count: prevState.count + 1}
})
this.setState((prevState, props) => {return {count: prevState.count + 1}
})
this.setState((prevState, props) => {return {count: prevState.count + 1}
})

五、React ≤ 17 VS React 18

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

import React from 'react'interface isState {count: any
}class App extends React.Component<any, isState> {constructor(props:any) {super(props)this.state = {count: 0}}render() {return <p><span>666</span>{this.state.count}</p>}componentDidMount() {// count 初始值为 0this.setState({ count: this.state.count + 1 })console.log('1', this.state.count) // 0     react18: 0   this.setState({ count: this.state.count + 1 })console.log('2', this.state.count) // 0     react18: 0setTimeout(() => {this.setState({ count: this.state.count + 1 })console.log('3', this.state.count) // 2  react18: 1})setTimeout(() => {this.setState({ count: this.state.count + 1 })console.log('4', this.state.count) // 3  react18: 1})}
}export default App

在这里插入图片描述

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

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

相关文章

ubuntu下yolov5 tensorrt模型部署

文章目录 ubuntu下yolov5 tensorrt模型部署一、Ubuntu18.04环境配置1.1 安装工具链和opencv1.2 安装Nvidia相关库1.2.1 安装Nvidia显卡驱动1.2.2 安装 cuda11.31.2.3 安装 cudnn8.21.2.4 下载 tensorrt8.4.2.41.2.5 下载仓库TensorRT-Alpha并设置 二、从yolov5源码中导出onnx文…

力扣第108题 将有序数组转二叉搜索树 c++

题目 108. 将有序数组转换为二叉搜索树 简单 相关标签 树 二叉搜索树 数组 分治 二叉树 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树…

【iOS】Mac M1安装iPhone及iPad的app时设置问题

【iOS】Mac M1安装iPhone及iPad的app时设置问题 简介一&#xff0c;设置问题二&#xff0c;适配问题 简介 由于 苹果M1芯片的Mac可用安装iPhone以及iPad应用&#xff0c;因为开发者并没有适配Mac&#xff0c;因此产生了很多奇怪问题&#xff0c;这里总结归纳Mac M1安装iPhone和…

五、OSPF动态路由实验

拓扑图&#xff1a; 基本ip的配置已经配置好了&#xff0c;接下来对两台路由器配置ospf协议&#xff0c;两台PC进行跨网段通讯 R1与R2构成单区域OSPF区域0&#xff0c;首先对R1进行配置 首先进入ospf 默认进程1&#xff0c;router id省略空缺&#xff0c;之后进入area 0区域&…

迁移学习--预训练微调

目录 1、迁移学习作用 2、迁移学习的途径 3、相关的领域 4、在计算机视觉中的应用 5、迁移学习的办法 预训练模型 微调 6、总结 1、迁移学习作用 定义&#xff1a;能在一个任务学习一个模型&#xff0c;然后用来解决相关的别的任务&#xff0c;这样我们在一个地方花…

一种用于肽图分析的烷化剂,Desthiobiotin-Iodoacetamide

中文名&#xff1a;脱硫生物素-碘乙酰胺 英文名&#xff1a;Desthiobiotin-Iodoacetamide 化学式&#xff1a;C14H25IN4O3 分子量&#xff1a;424.28 外观&#xff1a;固体/粉末 规格&#xff1a;10mg、25mg、50mg等&#xff08;接受各种规格的定制服务&#xff0c;具体可…

Elasticsearch:使用 Langchain 和 OpenAI 进行问答

这款交互式 jupyter notebook 使用 Langchain 将虚构的工作场所文档拆分为段落 (chunks)&#xff0c;并使用 OpenAI 将这些段落转换为嵌入并将其存储到 Elasticsearch 中。然后&#xff0c;当我们提出问题时&#xff0c;我们从向量存储中检索相关段落&#xff0c;并使用 langch…

C# InformativeDrawings 生成素描画

效果 项目 下载 可执行程序exe下载 源码下载

竞赛选题 深度学习+python+opencv实现动物识别 - 图像识别

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 inception_v3网络5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…

Swagger3.0 与spring boot2.7x 整合避免swagger2.0与boot2.7冲突

注释掉2.0引入的俩包 直接引入3.0 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version></dependency> swagger配置文件粘贴即用哦 import org.springfram…

git多分支、git远程仓库、ssh方式连接远程仓库、协同开发(避免冲突)、解决协同冲突(多人在同一分支开发、 合并分支)

1 git多分支 2 git远程仓库 2.1 普通开发者&#xff0c;使用流程 3 ssh方式连接远程仓库 4 协同开发 4.1 避免冲突 4.2 协同开发 5 解决协同冲突 5.1 多人在同一分支开发 5.2 合并分支 1 git多分支 ## 命令操作分支-1 创建分支git branch dev-2 查看分支git branch-3 分支合…

抖音直播招聘小程序可以增加职位展示,提升转化率,增加曝光度

抖音直播招聘报白是指进入抖音的白名单&#xff0c;允许在直播间或小视频中发布招聘或找工作等关键词。否则会断播、不推流、限流。抖音已成为短视频流量最大的平台&#xff0c;但招聘企业数量较少。抖音招聘的优势在于职位以视频、直播方式展示&#xff0c;留存联系方式更加精…

伦敦银单位转换很简单

伦敦银源自于英国伦敦的电子化的白银投资方式&#xff0c;高杠杆和高收益的它的基本属性&#xff0c;但有别于国内大家所熟悉的投资品种&#xff0c;伦敦银在交易过程中有很多不一样的地方&#xff0c;需要大家地去留意。 比如伦敦银的计价单位是盎司&#xff0c;而且具体来说…

我们又组织了一次欧洲最大开源社区活动,Hugging Face 博客欢迎社区成员发帖、Hugging Chat 功能更新!...

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

应用在汽车发动机温度检测中的高精度温度传感芯片

汽车发动机是为汽车提供动力的装置&#xff0c;是汽车的心脏&#xff0c;决定着汽车的动力性、经济性、稳定性和环保性。根据动力来源不同&#xff0c;汽车发动机可分为柴油发动机、汽油发动机、电动汽车电动机以及混合动力等。 常见的车用温度传感器有进气温度传感器、变速器…

Mysql数据库 1.概述

Mysql内容概述 1. Mysql概述 数据库相关概念&#xff1a; 名称 全称 简称 数据库 存储数据的仓库&#xff0c;数据是有组织的进行存储 …

云原生Kubernetes:K8S集群版本升级(v1.20.6 - v1.20.15)

目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群 4.验证集群 二、实验 1.升级集群 2.验证集群 三、问题 1.给node1节点打污点报错 一、理论 1.K8S集群升级 &#xff08;1&#xff09;概念 搭建K8S集群的方式有很多种&#xff0c;比如二进制&#xff0c;kubeadm…

Chrome插件精选 — 鼠标手势插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件记录下比较好用的一款或几款&#xff0c;便于节省尝试的时间和精力。 下面是两款比较好用的鼠标手势插件&#xff0c;支持很多设置选项&#xff0c;可以自定义手势&…

【问题思考】为什么SCAN CSCAN会导致磁臂黏着而FCFS不会导致磁臂黏着?

问题 这道18年的真题引起了我的疑惑&#xff0c;SCAN和CSCAN我认为应该也不会导致磁臂黏着&#xff0c;因为他们对于一个访问序列&#xff0c;比如19&#xff0c;24&#xff0c;52&#xff0c;现在正往外走&#xff0c;但是来了一个12的&#xff0c;不是早晚会往回走&#xff…

【C++】如何使用RapidXML读取和创建XML文件

2023年10月11日&#xff0c;周三下午 目录 RapidXML的官网使用rapidXML读取XML文件中的元素的属性和值此次要读取的XML文件&#xff1a;ReadExample.xml用于读取此XML文件的C代码运行结果使用rapidXML创建XML文件用于创建XML文件的C代码 如果上面的代码无法运行运行结果​编辑…