react 中的“待处理状态”是什么？

Question

来自反应文档：

在下面的代码中，a => a + 1 是一个更新函数。它采用 pending 状态 并从中计算下一个状态。

React 将您的更新器函数放入队列中。然后，在下一次渲染期间，它将以相同的顺序调用它们：

a => a + 1 将接收 42 作为待处理状态并返回 43 作为下一个状态。

a => a + 1 将接收 43 作为待处理状态并返回 44 作为下一个状态。

a => a + 1 将接收 44 作为待处理状态并返回 45 作为下一个状态。

没有其他排队更新，因此 React 最终将存储 45 作为当前状态。

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(42);

  function handleClick() {
    setCount(a => a + 1);
    setCount(a => a + 1);
    setCount(a => a + 1);
  }
  alert(count)
  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

什么是待处理状态？和现在的状态一样吗？

Answer 1

因此，此示例位于 https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state

如果您阅读https://react.dev/reference/react/useState#setstate，您可以看到传递给 setState 的更新器函数将挂起状态作为唯一的参数。所以是的，在函数handleClick的第一行中，挂起状态和当前状态是相同的，但是之后在后续行中，挂起状态和当前状态是不同的，因为useState将批量发送所有这些更新，并且稍后会更新而且不只是在现场。要检查您是否没有在此处获得年龄状态变量的即时更新，您可以在 setAge 之前和之后放置 console.log(age) ，您会发现在控制台中获得相同的值，因为 React 在事件处理程序之后处理状态更新已经运行完毕。这称为批处理。

您可以在https://react.dev/learn/queueing-a-series-of-state-updates

了解有关React批处理的更多信息