使用钩子时，React 批量状态更新功能是否有效？

对于类组件，this.setState如果在事件处理程序内部，则调用批处理。但是如果状态在事件处理程序之外更新并使用，会发生什么useState hook?

function Component() {
  const [a, setA] = useState('a');
  const [b, setB] = useState('b');

  function handleClick() {
    Promise.resolve().then(() => {
      setA('aa');
      setB('bb');
    });
  }

  return <button onClick={handleClick}>{a}-{b}</button>
}

会渲染吗aa - bb马上？或者它会是aa - b进而aa - bb?

TL;DR– 如果状态更改是异步触发的（例如包含在 Promise 中），则它们不会被批量处理；如果直接触发，则会进行批量处理。

我设置了一个沙箱来尝试一下：https://codesandbox.io/s/402pn5l989 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, then a aa and b bb.

所以答案是否定的，在这种情况下，它不会渲染aa - bb立即，每个状态更改都会触发新的渲染，没有批处理。

然而，当你点击“withoutpromise”按钮时，控制台会显示a aa and b bb马上。

因此，在这种情况下，React 会批量处理状态更改，并同时对两者进行一次渲染。