框架篇-面试题9-React中setState是同步还是异步的

最新推荐文章于 2024-03-14 08:15:00 发布

原创

最新推荐文章于 2024-03-14 08:15:00 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端 #ecmascript #前端框架

React中setState可能是同步或异步的，这取决于其执行上下文。在合成事件和生命周期钩子中，setState是异步的，而在原生事件和定时器中则同步。批量更新时，多个setState会被合并，且在组件更新之前执行。通过手动设置，可以控制setState的异步执行。注意在合成事件和钩子中，更新队列的合并状态可能导致值被覆盖。

在React中,setState既可以是同步的也可以是异步的,这取决于执行时机和执行的上下文

[1]. setState的异步并不是指内部由异步代码实现的,实际上执行的过程和代码都是同步的,只是合成事件和钩子函数调用的顺序在更新之前,导致在合成事件和钩子函数中不能立即看到state的变化,而在原生事件和setTimeout中,setState是同步的

[2]. 在React17中,setState是批量执行的,因为执行前会设置executionContext,但如果在setTimeout,事件监听器等函数中,就不会设置executionContext的，这时候setState会同步执行,可以在外面包一层batchUpdates函数,手动设置下excutionContext来切换成异步批量执行

[3]. 在React的渲染流程中,setState会创建update对象挂到fiber对象上,然后耨调度performSyncWorkOnRoot重新渲染,一个主要任务的先后顺序是:render阶段render函数执行-->commit阶段真实DOM