-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Open
Labels
Description
在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 机制
yygmind, zhipairen, RocGit, andylidong, hellojackhui and 161 moredongkeng001, 2384830985, laoqq, chenhq123, yky138495 and 5 moredongkeng001, laoqq, chenhq123, gaoxuerong, Twisted928 and 1 moreJaneChelle, AlexZhong22c, 827652549, justsoup, SiroSong and 2 moreTwisted928 and chinawzcNathanHan1, xiaofeifei112, yanzhang146, shenqistart, laoqq and 6 moredongkeng001, laoqq, yky138495, hmLAzzzy, Twisted928 and 2 more
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
azl397985856 commentedon Feb 21, 2019
这里所说的同步异步, 并不是真正的同步异步, 它还是同步执行的。
这里的异步指的是多个state会合成到一起进行批量更新。
希望初学者不要被误导
azl397985856 commentedon Feb 22, 2019
你是想说明什么,没太明白。
你的意思难道是从你截图给的这个可以看出reactsetState是或者部分是异步的?
---补充---
或者你的意思难道是标题是《何时setState是异步的》, 就断定 “setState确实可能是异步的”
xueqingxiao commentedon Feb 22, 2019
这道题和19题有些类似。#18 (comment)
Lizhooh commentedon Feb 23, 2019
我们平时写的时候就当它是异步进行就好了。
[-]第18题:React 中 setState 什么时候是同步的,什么时候是异步的?[/-][+]第 18 题:React 中 setState 什么时候是同步的,什么时候是异步的?[/+]adminparry commentedon Jul 11, 2019
我的个人观点是这样的对于同步或者是异步都可以进行控制的想要同步就同步想要异步就异步
我老婆提醒我如果面试官问什么你管不了 谁让你想去那工作呢
ggzcg commentedon Jul 12, 2019
@yygmind 被这问题吓到了,还好点进来看了,你做出了我放心的解释
CC712 commentedon Aug 2, 2019
React Dan Abramov 大佬的解释
这题应该是想问
setState
的 reconiliation 特性dongkeng001 commentedon Oct 9, 2019
由React控制的事件处理程序,以及生命周期函数调用setState不会同步更新state 。
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件,setTimeout/setInterval等。
27 remaining items