react的setState做了什么

1、为什么需要setState

setState的作用是帮助我们更改数据的同时并且通知视图进行渲染。因为React并不会绑定视图和state,需要我们手动去更新视图。

2、setState什么时候是同步的,什么时候是异步的

setState这个方法在调用的时候是同步的,但是引起React的状态更新是异步的。在React中,如果是由React引发的事件处理(比如是通过onClick引发的事件处理,以及生命周期函数调用setState),调用setState不会同步更新this.state,除此之外的setState调用会同步执行this.state。
所谓"除此之外",指的是绕过React通过addEventListener直接添加的事件处理函数,还有通过setTimeout/setInterval产生的异步调用。

原因:

在 React 的 setState 函数实现中,会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说,而 isBatchingUpdates 默认是 false,也就表示 setState 会同步更新 this.state,但是,有一个函数 batchedUpdates,这个函数会把 isBatchingUpdates 修改为 true,而当 React 在调用事件处理函数以及生命周期函数之前就会调用这个 batchedUpdates,造成的后果,就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

React 的 batchUpdate 机制会在每一个方法执行之前设置一个 isBatchingUpdate 为 true,在方法执行结束之后设置 isBatchingUpdate 为 false 。那么当在执行 setState 这句代码的时候,如果 isBatchingUpdate 是 true,就命中了 batchUpdate 机制,会进行 “异步更新”;反之则是 “同步更新”。

3、setState的参数

setState(updater, [callback]),setState 可以接受两个参数,第一个参数可以是一个对象或者是一个函数,都是用来更新 state。如果需要对state数据更改监听,就可以使用第二个参数,它是用来监听state里面数据的更改,当数据更改完成,调用回调函数,用于可以实时的获取到更新之后的数据。

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

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

相关文章

【人工智能Ⅰ】实验1:谓词表示法与产生式知识表示

实验1 谓词表示法与产生式知识表示 一、实验目的 1、熟悉谓词逻辑表示法; 2、理解和掌握产生式知识表示方法,实现产生式系统的规则库。 二、实验内容 要求通过C/C/python语言编程实现: 1、猴子摘香蕉问题 2、动物识别系统 &#xff08…

Spring无法加载静态属性和SpringBoot单元测试指定加载配置文件

一、Spring无法加载静态属性,怎么解决? Spring主要用于管理和注入Bean(对象)的实例属性,而不是静态属性。静态属性属于类本身,而不是类的实例,因此Spring的依赖注入机制不会处理它们。 看图&a…

项目部署Linux步骤

1、最小化安装centos7-环境准备 安装epel-release 安装epel-release,因为有些rpm包在官方库中找不到。前提是保证可以联网 yum install -y epel-release 修改IP net-tools net-tool:工具包集合,包含ifconfig等命令 yum install -y net-…

【MySQL-->数据操作】

文章目录 前言一、insert1.单行插入2.多行插入3.插入更新/替换 二、select1.全列查询2.指定列插入3.列别名4. 表达式计算5.去重6.where条件查询7.排序8.limit分页显示 三、update四、delete五、插入查询结果六、聚合函数六、聚合分组1.格式2.where和having的区别 前言 一、inse…

个人创业新机遇,零成本开启真人手办定制项目

桌上的日历变薄,2023年已经接近尾声,浅观这一年,您是否发现大家日常关注的重点有明显的变化,诸多社会事件和宏观数字的背后,潜藏着对经济的“不托底”,而当我们真正开始关注起用个人经济积累去对冲未来的不…

大数据Flink(一百零一):SQL 表值函数(Table Function)

文章目录 SQL 表值函数(Table Function) SQL 表值函数(Table Function) Python UDTF,即 Python TableFunction,针对每一条输入数据,Python UDTF 可以产生 0 条、1 条或者多条输出数据,此外,一条输出数据可以包含多个列。比如以下示例,定义了一个名字为 split 的Pyt…

【会员管理系统】篇二之项目搭建、初始化、安装第三方库

一、项目搭建 1.全局安装vue-cli npm install -g vue/cli查看版本信息 vue -V 2.创建项目 vue create 项目名称 回车 回车 剩余选择如下 之后等待项目创建 最后npm run serve 二、初始化配置 1.更改标题 打开public下的index,将title标签里的改成想要设置的…

汽车电子专有名词与相应技术

1.EEA (Electronic & Electrical Architecture 电子电气架构) EEA在宏观上概括为物理架构与逻辑架构的结合,微观上通过众多电子元器件的协同配合,或集成式或分布式的系统级电子电气架构,具体详见专栏 新能源汽车电…

contenteditable实现文本内容确认提示

功能需求: 列表进行批量查询,需要对输入的值做提交校验,分三种情况: 若部分字符串有误,部分字符串需要变更字体颜色做提示,再次点击确认则对部分正确数据执行批量查询 若全部数据有误则变更字体颜色做提示&…

redis场用命令及其Java操作

目录 1. Redis入门 1.1 Redis简介 1.2 Redis下载与安装 1.2.1 Redis下载 1.2.2 Redis安装 1.3 Redis服务启动与停止 1.3.1 服务启动命令 1.3.2 客户端连接命令 1.3.3 修改Redis配置文件 1.3.4 Redis客户端图形工具 2. Redis数据类型 2.1 五种常用数据类型介绍 2.2 …

docker(1) dockfile制作docker java镜像 并启动

Dockerfile就是利用固定的指令来描述镜像的结构和构建过程,这样Docker才可以依次来构建镜像; 将springboot项目打包上传到指定目录,并且编写一个dockefile文件放在jar包的同级目录 输入命令 打包镜像 成功打包显示 运行镜像

中国区域2013-2021年森林地上生物量产品

该数据集包括中国陆地区域2013-2021年30m分辨率森林地上生物量产品。每年的产品存放在以年份数字命名的文件夹中,有2013-2021共9个文件夹。 每个文件夹内包括分块的产品和vrt文件。 产品命名方式为分区名年份数字.tif。 不同的分区名称如下: cold te…

简单聊下Redis的主从复制和哨兵机制以及集群(面试题)

ChatGPT的简答: Redis的主从复制(Master-Slave Replication)是指将一个Redis服务器的数据复制到其他Redis服务器的过程,其中一个服务器作为主节点(Master),而其他服务器作为从节点(S…

加上boot程序,FreeRTOS就跑不起来了

一、问题描述 bootloader跳转到APP时,app执行完初始化程序后死机 二、分析问题 第一步,执行app时死机死到哪里?通过DEBUG调试发现死到hardfault_handler()函数中,硬件错误,导致硬件错误的原因一般都是中断异常引起的。…

李宇航

该篇文章仅用作能直接在百度搜索到我的csdn,进入我的主页,没有实际意义. 进入李宇航博客方法 通过百度搜索"李宇航" 链接: https://blog.csdn.net/llllyh812 1.电脑端进入方法 输入网址链接: https://blog.csdn.net/llllyh812 或者 进入csdn主页,搜索"李宇…

口袋参谋:实时监测竞争对手的流量来源!

​ 在竞争激烈的淘宝天猫上运营店铺,如果想快速了解竞争对手的销售情况。 则可以通过口袋参谋同类目竞店透视工具,来剖析对方的数据信息,全面了解竞争对手的营销策略。 口袋参谋【同类目竞店透视】功能: 支持一键透视任意竞品…

Rockchip RK3399 - DRM crtc基础知识

一、LCD硬件原理 1.1 CRT介绍 CRT是阴极射线管(Cathode Ray Tube)的缩写,它是一种使用电子束在荧光屏上创建图像的显示设备。CRT显示器在过去很长一段时间内是主流的显示技术,现已被液晶显示屏或其他新兴技术所替代。 在CRT显示器中,扫描电子束从左到右、从上到下移动,照亮…

laravel 中 npm run 同时执行多个命令

在使用laravel 启动项目时 经常需要同时运行两个命令。 1.前端既是 npm run dev 2.后端php则是 php artisan serve 可以安装 使用 concurrently 进行并行启动 concurrently - npm npm install concurrently --save 之后修改 package.json 在 scripts 中增加 (多条…

useLayoutEffect和useEffect的区别

使用方式 这两个函数的使用方式其实非常简单,他们都接受一个函数一个数组,只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了,不清楚的可以先参考官网 。 差异 useEffect 是异步执行的,而…

一招解决“请在微信客户端中打开链接”

一招解决“请在微信客户端中打开链接”-遇见你与你分享 在浏览器访问网站,却提示“请在微信客户端打开链接”。虽然这个情况你可能从未遇到过,但对于爱折腾的小伙伴,确是一道拦路虎 其实解决办法很简单,就是新建一个UA&#xff1…