当使用钩子时，是否使用批处理状态更新函数？

Question

对于类组件，this.setState在事件处理程序中调用批处理。但是，如果状态在事件处理程序之外更新并使用useStatehook，会发生什么呢？

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？

Answer 1

如果事件处理程序是基于反应的react，则它会批量更新。这对于setState或useState调用都是正确的。

但如果事件是基于非反应的，即setTimeout、Promise调用，它不会自动批处理。简而言之，任何来自Web API的事件。

Answer 2

目前，在React v16及更早版本中，默认情况下仅批处理React事件处理程序内部的更新，如单击或更改等。所以就像类一样，状态更新在钩子中也是以类似的方式批处理的

当您需要时，有一个不稳定的API可以在事件处理程序之外强制批处理罕见的情况。

ReactDOM.unstable_batchedUpdates(() => { ... })

计划在v17或更高版本的未来版本中批处理所有状态更新。

现在，如果事件处理程序中的状态更新调用处于异步函数中，或者由于异步代码而被触发，它们不会在直接更新被批处理的地方被批处理

其中，没有同步代码的状态更新是批处理的，而异步代码更新不是批处理的

function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // async update from useEffect
  useEffect(() => {
    setTimeout(() => {
      setCount1(count => count + 1);
      setCount2(count => count + 2);
    }, 3000);
  }, []);

  const handleAsyncUpdate = async () => {
    await Promise.resolve("state updated");
    setCount1(count => count + 2);
    setCount2(count => count + 1);
  };

  const handleSyncUpdate = () => {
    setCount1(count => count + 2);
    setCount2(count => count + 1);
  };

  console.log("render", count1, count2);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button type="button" onClick={handleAsyncUpdate}>
        Click for async update
      </button>
      <button type="button" onClick={handleSyncUpdate}>
        Click for sync update
      </button>
    </div>
  );
}

https://codesandbox.io/s/739rqyyqmq

Answer 3

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);

我制作了两个按钮，一个触发封装在promise中的状态更改，就像在代码示例中一样，另一个直接触发状态更改。

如果您查看控制台，当您按下“带promise”按钮时，它将首先显示a aa和b b，然后显示a aa和b bb。

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

但是，当您单击“无promise”按钮时，控制台将立即显示a aa和b bb。

因此，在本例中，React会对状态更改进行批处理，并同时对两者进行一次渲染。