React hook setState arguments

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>;
}

官方文件说：

如果使用以前的状态计算新状态，则可以传递 函数来设置状态。该函数将接收上一个值， 并返回更新的值。

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

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>;
}