小编use*_*452的帖子

我试图弄清楚当使用 useState 钩子更新 React 中的状态时重新渲染何时发生。在下面的代码中，单击按钮会触发包含 setTimeout 的handleClick 函数。setTimeout 内部的回调会在 1 秒后执行，通过调用 setCount 来更新状态变量 count。然后控制台日志会打印一条消息。

单击按钮后我期望控制台日志显示的顺序是：

1. '更新前计数', 0
2. '在 setTimeout 中计算更新后的数量', 0
3. '渲染计数', 1

然而，运行此代码后我看到的顺序是：

1. '更新前计数', 0
2. '渲染计数', 1
3. '在 setTimeout 中计算更新后的数量', 0

“'Count in render', 1”怎么会出现在“'Count post update in setTimeout', 0”之前？setCount 不会导致重新渲染的安排不是立即进行吗？控制台在 setCount 函数调用后立即记录不应该总是在触发重新渲染之前执行吗？

function AppFunctional() {
  const [count, setCount] = React.useState(0);
  const handleClick = () => {
    console.log('Count before update', count);
    setTimeout(() => {
      setCount(count + 1);
      console.log('Count post update in setTimeout', count);
    }, 1000);
  };
  console.log('Count …