TL;DR – 如果状态更改是异步触发的(例如包装在一个 Promise 中),它们将不会被批处理;如果它们被直接触发,它们将被批处理。
我已经设置了一个沙箱来试试这个:https ://codesandbox.io/s/402pn5l989
import React, { Fragment, useState } from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
function Component() {
const [a, setA] = useState('a');
const [b, setB] = useState('b');
console.log('a', a);
console.log('b', b);
function handleClickWithPromise() {
Promise.resolve().then(() => {
setA('aa');
setB('bb');
});
}
function handleClickWithoutPromise() {
setA('aa');
setB('bb');
}
return (
<Fragment>
<button onClick={handleClickWithPromise}>
{a}-{b} with promise
</button>
<button onClick={handleClickWithoutPromise}>
{a}-{b} without promise
</button>
</Fragment>
);
}
function App() {
return <Component />;
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
我制作了两个按钮,一个触发包装在您的代码示例中的承诺中的状态更改,另一个直接触发状态更改。
如果你看一下控制台,当你点击“with promise”按钮时,它会首先显示a aa
and b b
,然后是a aa
and b bb
。
所以答案是否定的,在这种情况下,它不会aa - bb
立即渲染,每次状态更改都会触发新的渲染,没有批处理。
但是,当您单击“无承诺”按钮时,控制台将a aa
立即显示b bb
。
因此,在这种情况下,React 会批量处理状态更改并同时为两者进行一次渲染。