我可以依靠 useState 值来计算新状态吗？

Question

考虑简单的状态钩子：

const [count, setCount] = React.useState(0);

我想增加或减少计数。基本上做钩子文档中显示的相同的事情。

但作为旧函数的已知事实this.setState：

因为 this.props 和 this.state 可能会异步更新，所以你不应该依赖它们的值来计算下一个状态。

根据旧状态更新状态的正确方法是：

this.setState((state) => ({
  counter: state.counter + 1
}));

同样的事情适用于setCount吗？或者我可以确定它count总是最新的？

Answer 1

useState钩子的工作方式与this.setState. setCount在下面的示例中，调用您的 setter确实是异步工作的，但由于count在功能组件的呈现期间不会更改，因此评估是确定性的。

下面的示例是从React 文档中的Hooks at a Glance逐字复制的，它是 100% 安全的（在未挂载的组件上调用方法时不会出现任何错误），并且会按预期运行：

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

唯一需要在将函数传递给的情况下使用功能更新setCount是setCount在引用状态时需要多次调用。请注意，这不是因为setState是异步的，而是因为count直到下一次渲染才会更新。

例如，这将是一个问题：

<button
  onClick={() => {
    setCount(count + 1)
    setCount(count + 1) // since `count` is not dynamically updated mid-render, this evaluates to the same value as above
  }}
/>

在实践中，这种模式比较少见。您不会以这种方式在单个函数中多次调用 setter。相反，如果您将 setter 作为道具传递给孩子，并且这些孩子引用由 setter 控制的状态，那么您将使用功能更新模式。但是，即使在这种情况下，React 也会使用每个连续的 value 重新渲染组件。