Question

一个组件中使用了两个useState挂钩。如果我们允许事件循环在修改状态之前“重排”，则每个挂钩都会导致单独的重新渲染。

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export default function App() {
  const [foo, setFoo] = useState("initial_foo");
  const [bar, setBar] = useState("initial_bar");

  const onAction = useCallback(async () => {
      await sleep(0); // this is the culprit
      setFoo("updated_foo");
      setBar("updated_bar");
  }, []);

  console.log(`rendering foo:${foo} bar:${bar}`);

  return (
    <>
      <button onClick={onAction}>run test</button>
      <div>{"foo: " + foo}</div>
      <div>{"bar: " + bar}</div>
    </>
  );
}

使用await sleep(0)的控制台输出：

rendering foo:initial_foo bar:initial_bar
rendering foo:updated_foo bar:initial_bar
rendering foo:updated_foo bar:updated_bar

如果我们删除await sleep(0);，一切都会按预期进行：setFoo和setBar会导致一次重新渲染。

不带await sleep(0)的控制台输出：

rendering foo:initial_foo bar:initial_bar
rendering foo:updated_foo bar:updated_bar

The demo （在演示控制台中，输出已复制，因为它启用了React严格模式）

为什么会这样？
是错误还是功能？
我们如何防止这种中间转售？

更新：

问题已在React project repo

中创建

Answer 1

在承诺中（以及与此相关的计时器），setState是同步的。因此，您有两个rerender（首先是setFoo，然后是setBar），而不是组合（批处理）一个。

这是一个例子：

如果您在Promise中单击 setState 按钮，则会在每个状态之后记录rerender，但是如果您在eventHandler中单击 setState ，首先将获得两个setState日志，然后只有一个重新呈现。此行为应在React 17中更改，其中状态更新将仅是异步的。

function App() {
  const [foo, setFoo] = React.useState(); 
  const [bar, setBar] = React.useState();
  function handlerPromise() {
    Promise.resolve().then(() => {
      console.log("setFoo");
      setFoo({});
      console.log("setBar");
      setBar({});
    }) 
  }
      function handler() {
      console.log("setFoo");
      setFoo({});
      console.log("setBar");
      setBar({});

  }
  console.log("rerender");
  return (
  <div>
  <button onClick={handlerPromise}>setState in Promise</button>
  <button onClick={handler}>setState in an eventHandler</button>
  </div>
  )
}



ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>

<div id="root"></div>

为什么每个状态挂钩更新都会导致异步代码中的单独重新渲染？

1 个答案: