Question

我看到有人使用钩子更新状态，如下所示：

const [count, setCount] = useState(0)

方式1：setCount(count + 1)

方式2：setCount(count => count + 1)

这两种方式有什么区别？

Answer 1

从文档中

状态更新可能是异步的

反应可以批多个setState()   调用一次更新以提高性能。

由于this.props和this.state可能被异步更新，因此您   不应依赖于它们的值来计算下一个状态。

因此，在基于当前状态的值更新状态时，最好使用回调版本。

const [count, setCount] = useState(0); // initial state is 0

例如像在单个处理程序中那样多次更新状态：

setCount(count + 1); 
// new state will be 1 

setCount(count + 1); 
// new state will still be 1 because updates are async 
// and `count` still is 0 at the time of calling this

而

setCount(count => count + 1); 
// new state will be 1

setCount(count => count + 1); 
// new state will be 2 because the value passed 
// to the callback will include the previous update

如果您想安全起见，请在基于当前状态进行更新时始终使用回调。

更多信息可以在docs中找到。

Answer 2

由于设置器的异步特性，因此，只要新状态依赖于先前状态，就应该使用函数方式（方式2），以防止出现时髦的行为。

如果您的新状态不依赖于先前的状态，则可以在不使用功能的情况下正常进行设置。

从文档中：

“ +”和“-”按钮使用功能形式，因为更新后的值基于先前的值。但是“重置”按钮使用的是正常形式，因为它总是将计数设置回初始值。

https://reactjs.org/docs/hooks-reference.html

正确使用useState

2 个答案: