React hook setState 参数

Question

我想知道以下两个版本的代码之间的区别。两个版本的作用相同。

1）这里仅使用计数器变量来获取当前值

const Counter = () => {
  const [counter, setCounter] = useState(0);
  return <button onClick={() => setCounter(counter + 1)}>{counter}</button>;
}

2）这个版本传递一个函数给setCounter

const Counter = () => {
  const [counter, setCounter] = useState(0);
  return <button onClick={() => setCounter(c => c + 1)}>{counter}</button>;
}

官方文档说：

如果新状态是使用先前状态计算的，则可以将函数传递给 setState。该函数将接收先前的值，并返回更新后的值。

那么第一个选项有什么问题呢？有一些陷阱吗？

Answer 1

对于示例中的特定代码，您手头有以前的值，因此没有太大区别。但有时你不这样做。例如，假设您想要一个记忆回调函数。由于记忆化，counter当创建闭包时， 的值被锁定，并且不会是最新的。

const Counter = () => {
  const [counter, setCounter] = useState(0);

  // The following function gets created just once, the first time Counter renders.
  const onClick = useCallback(() => {
    setCounter(c => c + 1); // This works as intended
    //setCounter(counter + 1); // This would always set it to 1, never to 2 or more.
  }, []); // You could of course add counter to this array, but then you don't get as much benefit from the memoization.

  return <button onClick={onClick}>{counter}</button>;
}