使用非结构化状态计算新状态是否安全？

Question

使用非结构化状态计算新状态是否安全？

例如：

const [clickCount, setClickCount] = useState(0);
//then later
setClickCount(clickCount + 1)

我知道对于使用this.state +1的类是不行的，最好是使用提供以前状态的setState过载。考虑到docs使用了一个类似于上面的例子，而且没有提到这一点，我假设它是安全的。直到我发现setState动作签名是：

type SetStateAction<S> = S | ((prevState: S) => S);

如果安全的话，我现在很好奇为什么这个选项可以为函数提供以前的状态。否则，如果您已经解除了当前状态的结构，那么您什么时候会需要它呢？

编辑：

作为参考，这是文档中关于setState和this.state的说明：

setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。 对setState的调用不能保证同步操作，为了提高性能，调用可以批处理。

Answer 1

类似于类组件中的setState API如何接受一个函数作为参数表，钩子也接受相同的函数。

从官方文件：您可以始终传递一个函数，以防您想要使用以前重载的新状态。

这是否意味着，与this.state一样，使用钩子也无法保证在非结构化状态下发生突变？

尽管在类中获得状态的方式和钩子是不同的，但是setState API本身在这两个方面都有类似的实现。它仍然是异步的。因此，无论您如何访问状态(类中的this.state或钩子中的state )，都有可能基于代码使用陈旧的状态。例子：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Reset</button>
      <button onClick={() => setCount(count + 2)}>+</button>
    </>
  );
}


class Counter extends React.Component {
  constructor() {
    super();
    this.state = initialCount;
  }

  render() {
    <>
      Count: {count}
      <button onClick={() => this.setState(count + 1)}>Reset</button>
      <button onClick={() => this.setState(count + 2)}>+</button>
    </>
  }
}

以两种方式实现了相同的组件。但这两种方法都不能保证在后续的setState语句中使用以前的状态值。因此，在这些情况下，最好在钩子和类中传递函数。