【 React 】React 中的setState执行机制

1. 是什么

—个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用如下例子

import React, { Component } from 'react'
export default class App extends Component {constructor(props) {super(props);this.state = {message: "Hello World"}}render() {return (<div><h2>{this.state.message}</h2> <button onClick={e => this.changeText()}> </button></div> ) }changeText() {this.setState({ message: "JS " })} 
}

通过点击按钮触发onclick事件,执行this.setState方法更新state状态,然后重新执行render函数,从而导致页面的视图更新

如果直接修改state的状态,如下:

changeText() { this.state.message = "你好 , 李可乐"; } 

我们会发现页面并不会有任何反应,但是state的状态是已经发生了改变
这是因为React并不像vue2中调用Object.defineProperty数据响应式或者Vue3调用PrOxy监听数据的变化
必须通过setState方法来告知react组件state已经发生了改变
关于state方法的定义是从React.Component中继承,定义的源码如下:

Component.prototype.setState = function(partialState, callback) {invariant(typeof partialState === 'object' ||typeof partialState === 'function' ||partialState == null,'setState(...): takes an object of state variables to update or a ' +'function which returns an object of state variables.', );this.updater.enqueueSetState(this, partialState, callback, 'setState');};

从上面可以看到setState第一个参数可以是一个对象,或者是一个函数,而第二个参数是一个回调函数,用于可以实时的获取到更新之后的数据

2.更新类型

在使用setState更新数据的时候,
setState的更新类型分成:
● 异步更新
● 同步更新

2.1 异步更新

先举出一个例子:

changeText() {this.setState({ message: "hello " })console.log(this.state.message); // Hello World
}

从上面可以看到,最终打印结果为Hello world,并不能在执行完setState之后立马拿到最新的state的结果
如果想要立刻获取更新后的值,在第二个参数的回调中更新后会执行

changeText() {this.setState({message: "hello " }, () => {console.log(this.state.message); // hello});}

2.2 同步更新

同样先给出一个在setTimeout中更新的例子:

changeText() {setTimeout(() => {this.setState({ message: "hello" });console.log(this.state.message); // hello}, 0); 
} ;

上面的例子中,可以看到更新是同步
再来举一个原生DOM事件的例子:

componentDidMount() {const btnEl = document.getElementById("btn");btnEl.addEventListener('click', () => {this.setState({  message: "hello" });console.log(this.state.message); }) 
}

2.3 小结

● 在组件生命周期或React合成事件中,setState是异步 ● 在setTimeout或者原生dom事件中,setState是同步

2.4 批量更新

对同一个值进行多次setState,setState的批量更新策略会对其进行覆盖,取最后一次的执行结果
而在setTimeout或者原生dom事件中,由于是同步的操作,所以并不会进行覆盖现象

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

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

相关文章

Python实现24点游戏

24点游戏是一种数学益智游戏&#xff0c;它的目标是通过使用加法、减法、乘法和除法这四种基本算术运算&#xff0c;使得四个数字的结果等于24。这个游戏不仅能锻炼玩家的数学计算能力&#xff0c;还能提高逻辑思维和快速反应能力。 游戏规则非常简单&#xff1a; 游戏通常使…

KY113 字母统计

描述&#xff1a; 输入一行字符串&#xff0c;计算其中A-Z大写字母出现的次数 输入描述&#xff1a; 案例可能有多组&#xff0c;每个案例输入为一行字符串。 输出描述&#xff1a; 对每个案例按A-Z的顺序输出其中大写字母出现的次数。 示例1 输入&#xff1a; DFJEIWFNQLEF03…

如何使用ArcGIS Pro生成带计曲线等高线

等高线作为常见的地图要素经常会被使用到&#xff0c;一般情况下生成的等高线是不带计曲线的&#xff0c;在某些情况下我们需要带计曲线的等高线&#xff0c;这里为大家介绍一下ArcGIS Pro生成带计曲线等高线的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数…

Node.js 文件夹遍历技巧:实现高效的文件管理

在 Node.js 开发中&#xff0c;经常需要对文件系统进行操作&#xff0c;包括遍历文件夹以获取文件列表。本文将讨论使用 Node.js 遍历文件夹的几种常用方法&#xff0c;并通过一个实际案例来演示如何实现。 基本概念 在开始之前&#xff0c;让我们了解一些基本的概念&#xff…

关 于 重 燃 学 习 的 热 情

3月1日是我回学校的第一天。经历了长达8个月在家的昏暗时刻&#xff0c;我这10天的感觉和在家的感觉发生了翻天覆地的变化&#xff0c;最明显的莫过于学习状态的改变。 倒不是说在家学的不好&#xff0c;而是说在学校&#xff0c;我对学习的整体感觉&#xff0c;以及专注程度&…

Spring事务传播行为总结

事务传播行为介绍 Spring中的7个事务传播行为: ​ 事务行为说明特点PROPAGATION_REQUIRED支持当前事务&#xff0c;假设当前没有事务。就新建一个事务父事务与子事务要么都成功&#xff0c;要么都失败PROPAGATION_SUPPORTS支持当前事务&#xff0c;假设当前没有事务&#xff0…

微信小程序Skyline模式自定义tab组件胶囊与原生胶囊平齐,安卓和ios均自适应

进入下面小程序可以体验效果&#xff1a; 至于原理的话&#xff0c;解释起来毕竟麻烦&#xff0c;各位可以看源码自己分析。其实很简单&#xff0c;就算计算布局。很多网上公布的布局&#xff0c;都不能正常自适应。在下这个是完美可以的 1、WXML <view class"weui…

Kubernetes operator系列:kubebuilder 实战演练 之 开发多版本CronJob

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列文章&#xff0c;本节会在上一篇开发的Cronjob基础上&#xff0c;进行 多版本Operator 开发的实战 本文的所有代码&#xff0c;都存储于github代码库&#xff1a;https://github.c…

Peter算法小课堂—最大边最短路

这一片文章把整个图论的知识都用上了,基础芝士如下 Peter算法小课堂—Dijkstra最短路算法-CSDN博客 Peter算法小课堂—拓扑排序与最小生成树-CSDN博客 Peter算法小课堂—贪心与二分-CSDN博客 二话不说,题呢? 罗密欧与朱丽叶 你是罗密欧,要去找朱丽叶。共有n个城市,编…

【全面了解自然语言处理三大特征提取器】RNN(LSTM)、transformer(注意力机制)、CNN

目录 一 、RNN1.RNN单个cell的结构2.RNN工作原理3.RNN优缺点 二、LSTM1.LSTM单个cell的结构2. LSTM工作原理 三、transformer1 Encoder&#xff08;1&#xff09;position encoding&#xff08;2&#xff09;multi-head-attention&#xff08;3&#xff09;add&norm 残差链…

python request unittest beautifulreport 接口自动化测试框架

接着上次开发的python request pandas excel 接口自动化测试框架&#xff0c;上次遗留了两个功能需要添加&#xff1a; 1&#xff0c;测试报告的优化 2&#xff0c;参数化和关联的设置&#xff08;如何在excel表里面设置参数化和关联&#xff09; 这次先解决测试报告的优化 …

【学习总结】Python transformers AutoTokenizer encode 出现的 101 和 102

1. 代码展示&#xff1a; from transformers import AutoTokenizer, AutoModelmodel_name "bert-base-chinese"tokenizer AutoTokenizer.from_pretrained(model_name) model AutoModel.from_pretrained(model_name)print(len(tokenizer.vocab.keys()))sequence …

linux: network: sysctl: netdev_budget_usecs的出现

这个参数就是为了在CPU于延迟直接做trade-off的一个参数,在Redhat的性能文档里有提,如果相应的计数有增加,就需要调整这个参数。 下面这个修改是,将原来的固定值改成了可修改的一个值。 commit 7acf8a1e8a28b3d7407a8d8061a7d0766cfac2f4 Author: Matthew Whitehead <…

安卓面试网络知识基础 1-5

1. 简述常见HTTP状态码分类?HTTP状态码概念 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含 HTTP 状态码的信息头(server header)用以响应浏览器的请求。 HTTP状态码的英文为HTTP Status …

九种背包问题(C++)

0-1背包&#xff0c;背包大小target&#xff0c;占用容积vec[i][0]&#xff0c;可以带来的利益是vec[i][1] 一件物品只能取一次,先遍历物品然后遍历背包更新不同容积下最大的利益 int func(vector<vector<int>>&vec,int target){vector<int>dp(target1,…

WXG 凉经(40m)

宝子们&#xff0c;卷起来&#xff1b; wxg 的部分面试题 两道算法&#xff0c; 合并两个有序数组&#xff0c;链表倒转 没问项目。 网络&#xff1a; 1. HTTPS了解吗&#xff0c;讲讲TSL 流程&#xff0c; 2. CA 签发流程 3. 浏览器缓存内CA 证书哪里来的 4. 最后通信…

【C语言】指针基础知识(一)

计算机上CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处理后的数据也会放回内存中。 一,内存和地址 内存被分为一个个单元&#xff0c;一个内存单元的大小是一个字节。 内存单元的编号&#xff08;可以理解为门…

Spring Data访问Elasticsearch----Elasticsearch存储库Repositories

Spring Data访问Elasticsearch----Elasticsearch存储库Repositories 一、自动创建具有相应映射的索引二、存储库方法的注解2.1 Highlight2.2 SourceFilters 三、基于注解的配置四、Spring命名空间Namespace 一、自动创建具有相应映射的索引 二、存储库方法的注解 2.1 Highlig…

2024年值得创作者关注的十大AI动画创新平台

别提找大型工作室制作动画了。如今,AI平台让我们就可以轻松制作动画。从简单的文本生动画功能到复杂的角色动作,这些平台为各种类型的创作者提供了不同的功能。 AI已经有了长足的发展,现在它可以理解复杂的人类动作和艺术意图,将简单的输入转化成丰富而详细的动画。 下面…

国产数据库研究-2024

作为提升自我能力的一部分&#xff0c;计划在2024年4-9月份&#xff0c;逐步梳理完善当前流行的国产数据库清单及各数据库能力&#xff0c;提高自己对各类数据库的掌握程度&#xff0c;做一名合格的DBA。 本文将通过一下方式进行各类数据库资料梳理及对比。 主要待了解的数据…