React面试题之setState的执行机制

setState 是 React 中用于更新组件状态的方法。

1. setState 的基本用法

在 React 类组件中,你可以使用 setState 来更新组件的状态。setState 接受一个对象或一个返回对象的函数作为参数

2. 合并状态更新

当调用 setState 时,React 不会立即更新 this.state。相反,React 会将状态更新请求放入队列中,并进行合并。

复制代码
this.setState({ count: 1 });
this.setState({ count: 2 });

3.同步异步

setState在合成事件和生命周期函数中是异步的,在原生事件和定时器中都是同步的。

setState本身不分同步或者异步,而是取决于是否处于batch update中。组件中的所有函数在执行时临时设置一个变量isBatchingUpdates = true,当遇到setState时,如果isBatchingUpdates是true,那么setState就是异步的,如果是false,那么setState就是同步的。那么什么时候isBatchingUpdates会被设置成false呢?

1当函数运行结束时isBatchingUpdates = false

2 当函数遇到setTimeout、setInterval时isBatchingUpdates = false

3 当dom添加自定义事件时isBatchingUpdates = false

相关推荐
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云2 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一2 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球2 小时前
el-button按钮的loading状态设置
前端·javascript
kidding7232 小时前
前端VUE3的面试题
前端·typescript·compositionapi·fragment·teleport·suspense
无责任此方_修行中4 小时前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
Σίσυφος19004 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端4 小时前
0基础学前端-----CSS DAY13
前端·css
dorabighead5 小时前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
css趣多多6 小时前
案例自定义tabBar
前端