New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 中 setState 什么时候是同步的，什么时候是异步的？ #38

Open

Rashomon511 opened this issue Apr 1, 2019 · 0 comments

Owner

Rashomon511 commented Apr 1, 2019 •

edited

Loading

在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方法调用的时候React就会重新调用render方法来重新渲染组件；setState通过一个队列来更新state,当调用setState方法的时候会将需要更新的state放入这个状态队列中，这个队列会高效的批量更新state;

详解: 深入 setState 机制

Rashomon511 changed the title ~~第十九题：React 中 setState 什么时候是同步的，什么时候是异步的？~~ React 中 setState 什么时候是同步的，什么时候是异步的？

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