Skip to content

第 18 题:React 中 setState 什么时候是同步的,什么时候是异步的? #17

@sisterAn

Description

@sisterAn
Collaborator

在React中,如果是由React引发的事件处理(比如通过onClick引发的事件处理),调用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

注意: setState的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后的值,形式了所谓的“异步”,当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。

详细请看 深入 setState 机制

Activity

azl397985856

azl397985856 commented on Feb 21, 2019

@azl397985856

这里所说的同步异步, 并不是真正的同步异步, 它还是同步执行的。

这里的异步指的是多个state会合成到一起进行批量更新。

希望初学者不要被误导

azl397985856

azl397985856 commented on Feb 22, 2019

@azl397985856

这里所说的同步异步, 并不是真正的同步异步, 它还是同步执行的。
这里的异步指的是多个state会合成到一起进行批量更新。
希望初学者不要被误导

你的说法还是太片面了,可以看下官网的介绍

image
https://reactjs.org/docs/faq-state.html#when-is-setstate-asynchronous

你是想说明什么,没太明白。

你的意思难道是从你截图给的这个可以看出reactsetState是或者部分是异步的?

---补充---

或者你的意思难道是标题是《何时setState是异步的》, 就断定 “setState确实可能是异步的”

xueqingxiao

xueqingxiao commented on Feb 22, 2019

@xueqingxiao

这道题和19题有些类似。#18 (comment)

Lizhooh

Lizhooh commented on Feb 23, 2019

@Lizhooh

我们平时写的时候就当它是异步进行就好了。

changed the title [-]第18题:React 中 setState 什么时候是同步的,什么时候是异步的?[/-] [+]第 18 题:React 中 setState 什么时候是同步的,什么时候是异步的?[/+] on Apr 26, 2019
adminparry

adminparry commented on Jul 11, 2019

@adminparry

我的个人观点是这样的对于同步或者是异步都可以进行控制的想要同步就同步想要异步就异步
我老婆提醒我如果面试官问什么你管不了 谁让你想去那工作呢

ggzcg

ggzcg commented on Jul 12, 2019

@ggzcg

@yygmind 被这问题吓到了,还好点进来看了,你做出了我放心的解释

CC712

CC712 commented on Aug 2, 2019

@CC712

React Dan Abramov 大佬的解释
这题应该是想问 setStatereconiliation 特性

dongkeng001

dongkeng001 commented on Oct 9, 2019

@dongkeng001

由React控制的事件处理程序,以及生命周期函数调用setState不会同步更新state 。
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件,setTimeout/setInterval等。

added and removed on Jan 2, 2020

27 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Verten@xueqingxiao@adminparry@yqz0203@stevekeol

        Issue actions

          第 18 题:React 中 setState 什么时候是同步的,什么时候是异步的? · Issue #17 · Advanced-Frontend/Daily-Interview-Question