JavaScript
React
React Hooks

React 函数组件useState,如果有多个修改state的异步程序,那么他们会同时执行,修改吗?

React 函数组件 Hooks useState的修改异步问题.
关注者
10
被浏览
17,494

2 个回答

React18之前，如果这些setState写在React的事件处理程序(event handler)里，比如onClick，那么他们会被同时执行（也就是会发生batching）。如果这些setState写在promises，setTimeout或者非React的js原生的事件处理程序（比如document.addEventListener）里，那么他们不会被同时执行。但是可以用ReactDOM.unstable_batchedUpdates来强制同时执行。

（借用一下 Dan Abramov 例子） 

// React18之前， 只会产生一次渲染； React18之后， 还是只会产生一次渲染。
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
// React18之前， 会产生两次渲染； React18之后， 和上面一样只会产生一次渲染。
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);
fetch(/*...*/).then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);