首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当两个setState()运行时,setState()会阻塞UI

当两个setState()运行时,setState()会阻塞UI的更新。setState()是React中用于更新组件状态的方法,它是异步执行的。当调用setState()时,React会将状态更新放入一个队列中,然后在适当的时机进行批量更新,以提高性能。

在React中,当多个setState()连续调用时,React会将这些更新合并为一个更新操作,以减少不必要的渲染。这意味着在一个事件循环中,多个连续的setState()调用只会触发一次UI更新。

然而,如果在一个setState()调用的回调函数中再次调用了setState(),React会将这个更新操作放入队列中,等待下一次批量更新。这样做是为了避免频繁的UI更新,提高性能。

因此,当两个setState()运行时,第一个setState()会触发UI更新,而第二个setState()会被放入队列中等待下一次批量更新。这意味着第二个setState()的更新不会立即反映在UI上,而是会延迟到下一次更新时才生效。

需要注意的是,由于setState()是异步执行的,所以在调用完setState()后立即访问更新后的状态可能会得到旧的状态值。如果需要在setState()执行后获取最新的状态值,可以在setState()的回调函数中进行操作。

总结起来,当两个setState()运行时,第一个会触发UI更新,而第二个会被延迟执行,直到下一次批量更新。这样的机制可以提高性能,避免频繁的UI更新。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 中 stateless 和 stateful widget 的区别

这意味着在应用程序运行时无法重绘无状态小部件。出于这个原因,外观和属性在小部件的整个生命周期中保持不变。 当我们描述的 UI 部分不依赖于任何其他小部件时,无状态小部件很有用。...有状态的小部件 UI 的某些部分必须在运行时动态更改时,使用有状态小部件。有状态的小部件可以在应用程序运行时多次重绘自己。 当我们描述的 UI 部分动态变化时,有状态小部件很有用。...它将被渲染一次并且不会自行更新setState() 有一个内部并且可以在输入数据更改时重新渲染setState() 静态小部件 动态小部件 除非发生外部事件,否则无法在运行时更新 可以在运行时根据用户操作或数据更改进行更新...请注意,对于要创建的两个小部件,它们都需要BuildContext作为返回小部件的参数。...现在,您可以使用针对不同用例的小部件创建更好的 UI。 小部件创建更好的 UI

2.2K10
  • 【React源码笔记】setState原理解析

    点击上方蓝字,发现更多精彩 导语 大家都知道React是以数据为核心的,状态发生改变时组件进行更新并渲染。...React把组件看成是一个State Machines状态机,首先定义数值的状态state,通过用户交互后状态发生改变,然后更新渲染UI。...异步可以避免react改变状态时,资源开销太大,要去等待同步代码执行完毕,使当前的JS代码被阻塞,这样带来不好的用户体验。 那setState什么时候执行异步操作或者同步操作呢?...同时也禁止在shouldComponentUpdate中调用setState,因为调用setState再次触发这个函数,然后这个函数又触发了 setState,然后再次触发这两个函数……这样进入死循环...script代码被执行时,遇到操作、函数调用就会压入栈。主线程若遇到ajax、setTimeOut异步操作时,交给浏览器的webAPI去执行,然后继续执行栈中代码直到为空。

    2K10

    腾讯前端必会react面试题合集_2023-02-27

    解决方案: 解决同步阻塞的方法,通常有两种: 异步 与 任务分割。...否则可能由于阻塞 UI 更新,而导致数据更新和 UI 不一致的情况 分散执行: 任务分割后,就可以把小任务单元分散到浏览器的空闲期间去排队执行,而实现的关键是两个新API: requestIdleCallback...遇到进程阻塞的问题时,任务分割、异步调用 和 缓存策略 是三个显著的解决思路。...在这两个生命周期只要视图更新就会触发,因此不能再这两个生命周期中使用setState。...否则会导致死循环 调和阶段 setState内部干了什么 调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态 这将启动一个称为和解(reconciliation

    1.7K20

    记一次React的渲染死循环

    所以,setState 可以看错是一个通知事件 调用 setValueObj 的时候,valueObj 的值的变更是不会立即生效的,而是产生一次通知(类似于监听-观察者模式) 通过调用 setState...第1步:初次渲染 组件被挂载到 DOM 之后,触发两个 useEffect。...至此,我们 React更新队列中就有了两个更新计划,前面 useState 分析中有说明,React 会将多次 setState 合并为同一次。 因此接下来执行合并之后 state 的UI渲染。...第2步:合并渲染 经过第一步之后,会合并前面的两次 setState 触发的 UI 更新计划,进行一轮新的综合性的组件 UI 更新。...因此,我们不难推断出,接下来同样产生两次 setState 触发的 UI 更新计划。 而这次更新的结果就是 value 和 valueObj 的值的再次互换。

    1.4K20

    细聊Concent & Recoil , 探索react数据流的新开发模式

    Concent在v2版本之后,重构数据追踪机制,启用了defineProperty和Proxy特性,得以让react应用既保留了不可变的追求,又享受到了运行时依赖收集和ui精确更新的性能提升福利,既然启用了...即插即用的核心原理是,Concent自建了一个平行于react运行时的全局上下文,精心维护这模块与实例之间的归属关系,同时接管了组件实例的更新入口setState,保留原始的setState为reactSetState...,可能部分人认为api太多,难于记住,其实大部分都是可选的语法糖,我们以counter为例,只需要使用到以下两个api即可 run,定义模块状态(必需)、模块计算(可选)、模块观察(可选)运行run接口后...,会生成一份concent全局上下文 setState,修改状态 定义状态&修改状态 以下示例我们先脱离ui,直接完成定义状态&修改状态的目的 import { run, setState, getState...,收集到了依赖 // 即counter模块的num、numBig的发生变化时,才触发其重渲染(最终还是调用setState) // 而counter模块的其他值发生变化时,不会触发该实例的setState

    1.7K2414

    把 React 作为 UI 运行时来使用

    一个专业的工具可以施加特定的约束,并且能从中获益时,它就比一般的工具要好。React 就是这样的典范,并且它坚持两个原则: 稳定性。...例如,当我们在 中新增两个 ,React 先决定是否要重用 ,然后为每一个子元素重复这个决定步骤。...缓存 父组件通过 setState 准备更新时,React 默认协调整个子树。因为 React 并不知道在父组件中的更新是否影响到其子代,所以 React 默认保持一致性。...但是我们将 React 作为一个运行时环境来看待,因为 React 用 JavaScript 来描绘整个 UI 树,它的特性往往更接近于语言层面。...将来这两个问题可能一起解决。并发模式在目前看来并不稳定,也有很多关于 Suspense 该如何适应当前版本的有趣问题。

    2.5K40

    「快速上手Flutter开发系列教程」之线程和异步UI

    Dart 的单线程模型,并不意味着你写的代码一定要作为阻塞操作的方式运行,从而卡住 UI。相反,可以使用 Dart 语言提供的异步工具,例如 async / await ,来实现异步操作。...一旦 await 的网络请求完成,通过调用 setState() 来更新 UI,这会触发 widget 子树的重建,并更新相关数据。...如果你需要做让 CPU 执行繁忙的计算密集型任务,你需要使用 Isolate 来避免阻塞 event loop。...这意味着你不能访问主线程中的变量,或者使用 setState() 来更新 UI。正如它们的名字一样,Isolate 不能共享内存。...一旦获得结果后,你可以通过调用setState来告诉Flutter更新其状态,setState将使用网络调用的结果更新UI

    2.2K20

    143. 精读《Suspense 改变开发方式》

    在讲解这三种取数方案之前,首先通过下面这张图说明了 Suspense 的功能: 从上图可以看出,子元素在异步取数时会阻塞父组件渲染,并一直冒泡到最外层第一个 Suspense,此时 Suspense...不会渲染子组件,而是渲染 fallback,所有子组件异步阻塞取消后才会正常渲染。...冗余的样板代码 - 糟糕的开发体验 将展示与逻辑分离,成功降低了样板代码数量,至少一个异步数据复用于多个组件时,不需要写多份样板代码了。...另外,关于文中提到的 fallback 最小出现时间的保护间隔,目前还是一个 Open Issue,也许有一天 React 官方提供支持。...另外由于状态的分离,我们可以利用纯 UI 组件拼装任意粒度的 Pending 行为,以整个 App 作为一个大的 Suspense 作为兜底,这样 UI 彻底与异步解耦,哪里 Loading,什么范围内

    41220

    React 深入系列3:Props 和 State

    React 的核心思想是组件化的思想,而React 组件的定义可以通过下面的公式描述: UI = Component(props, state) 组件根据props和state两个参数,计算得到对应界面的...UI。...调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React优化真正的执行时机,并且React会出于性能原因,可能会将多次setState的状态修改合并成一次状态修改...如果你真的有这样的需求,可以使用另一个接收一个函数作为参数的setState,这个函数有两个参数,第一个参数是组件的前一个state(本次组件状态修改成功前的state),第二个参数是组件当前最新的props...} 只需要修改状态title时,只需要将修改后的title传给setState: this.setState({title: 'Reactjs'}); React会合并新的title到原来的组件state

    2.8K60

    详解设计模式:状态模式

    一个对象的行为取决于它的状态,并且它必须在运行时根据状态改变它的行为时,就可以考虑使用状态模式。 一个操作中含有庞大的分支结构,并且这些分支决定于对象的状态时。...状态模式优点 可以将不同的状态隔离; 每个状态都是一个单独的类; 可以将各种状态的转换逻辑,分布到状态的子类中,减少相互依赖; 增加新状态,操作简单; # 状态模式缺点 如果状态数量比较多,状态类的数量增加...---- 二、状态模式 Demo 1、Demo 设计 我们此处可以设计一个多线程的状态转换程序,多线程存在 新建、就绪、运行、阻塞和死亡状态。各种状态遭到相关方法调用/事件触发时会向其他状态转换。...} else { System.out.println("当前线程不是 运行 状态,无法调用获取 '停止' 的方法"); } } } # 阻塞...public void resume(ThreadContext context) { System.out.println("调用 resume 方法"); if ("阻塞

    56210

    深入理解React的组件状态

    定义State是创建组件的第一步,定义的State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来;同时,State还必须是代表一个组件UI呈现的最小状态集...State 的更新是异步的 调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React优化真正的执行时机,并且React会出于性能原因,可能会将多次...如果我们要实现加2的效果,可以使用另一个接收一个函数作为参数的setState,这个函数有两个参数,第一个是当前最新状态(本次组件状态修改后的状态)的前一个状态preState(本次组件状态修改前的状态...State 的更新是一个浅合并的过程 调用setState修改组件状态时,只需要传入发生改变的State,而不是组件完整的State,因为组件State的更新是一个浅合并(Shallow Merge)...} 只需要修改状态title时,只需要将修改后的title传给setState即可。

    2.4K30

    React基础(6)-React中组件的数据-state

    ,onFocus,onBlur等这些事件类型里面绑定事件方法内的setState都是异步的 有时候,this.props和this.state可能异步更新,在调用setState之后,并不会立马更新组件...,从而导致UI界面的改变 你不能依赖它来更新下一个状态 对于SetState什么时候同步什么时候异步?...wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1] 从上面的代码中,在事件处理函数中调用setState方法时,setState函数传递的是一个函数时,这个函数接收两个形参数...,你传递一个函数给setState就可以了,并给该函数传递两个形参(state,prop),然后通过当中的形参来更新state就可以避免诡异的bug了 小结一下: setState函数是用于更新当前组件的状态的...状态(state)应该是随着时间产生变化的数据,更改这个状态(state),需要更新组件的UI,就可以将它定义成state,更多是在实现页面的交互时使用的 另一种程度上讲,在写静态,没有任何交互页面时

    6.1K00

    react高频面试题总结(附答案)

    如果将 setState 写在条件判断中,假设条件判断不成立,没有执行里面的 setState 方法,导致接下来所有的 setState 的取值出现偏移,从而导致异常发生。父子组件的通信方式?...经过调和过程,React 以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。...如果是异步,则可以把一个同步代码中的多个setState合并成一次组件更新。所以默认是异步的,但是在一些情况下是同步的。setState 并不是单纯同步/异步的,它的表现因调用场景的不同而不同。...多次执行setState批量执行具体表现为,多次同步执行的setState进行合并,类似于Object.assign,相同的key,后面的覆盖前面的当遇到多个setState调用时候,提取单次传递...展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。容器组件则更关心组件是如何运作的。

    2.2K40

    Change Detection And Batch Update

    新一代的框架或库,例如Angular、React、Vue等等让我们的关注点只在数据上,数据更新时,这些框架/库帮我们更新DOM。...那么这里就有两个很重要的问题了:数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...React在更新UI的时候根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后在根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...有人可能疑惑了,我们在编码的时候并没有调用$apply,那么UI是怎么更新的呢?...Vue模板中每个指令/数据绑定都有一个对应的watcher对象,数据变化时,触发watcher重新计算并更新相应的DOM。

    3.7K70

    Change Detection And Batch Update

    新一代的框架或库,例如Angular、React、Vue等等让我们的关注点只在数据上,数据更新时,这些框架/库帮我们更新DOM。...那么这里就有两个很重要的问题了:数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...React在更新UI的时候根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后在根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...有人可能疑惑了,我们在编码的时候并没有调用$apply,那么UI是怎么更新的呢?...Vue模板中每个指令/数据绑定都有一个对应的watcher对象,数据变化时,触发watcher重新计算并更新相应的DOM。

    3.3K40

    React 进阶 - State

    对于 concurrent 模式下,采用不同 State 更新逻辑。...# 类组件中的 State # setState 使用 React 项目中 UI 的改变来源于 state 改变,类组件中 setState 是更新组件,渲染视图的主要方式。...setState(obj, callback); setState 接收两个参数: 第一个参数 obj: obj 是对象,则为即将合并的 state obj 是函数,那么当前组件的 state...# 函数组件中的 State React-hooks 正式发布以后, useState 可以使函数组件像类组件一样拥有 state,也就说明函数组件可以通过 useState 改变 UI 视图。...但是 useState 中的 dispatchAction 默认比较两次 state 是否相同,然后决定是否更新组件 setState 有专门监听 state 变化的回调函数 callback,可以获取最新

    91820
    领券