Javascript 使用状态挂钩正确设置状态

我目前正在学习React，并试图了解如何在函数组件中正确更新状态

我从React文档中的“状态和生命周期”部分了解到，如果状态使用的是以前的状态，则应更新状态，如下所示：

// Correct
this.setState((state, props) => ({
  counter: state.counter + 1
}));

而不是

// Wrong
this.setState({
  counter: this.state.counter + 1,
});

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

现在，我想使用State钩子

useState

对函数组件实现同样的功能。 例如，如何更新函数组件中的状态，包含以下代码段：

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

setCount（count+1）}>
点击我

这相当于类组件中的以下代码：

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Click me
</button>

this.setState（{count:this.state.count+1}）}>
点击我

---

但这不是一个“错误”的解决方案，因为它直接依赖于状态吗？

您可以执行以下操作

import React, { userState } from 'react';


function TestHook() {
const [count, setCount] = useState(0);

  function updateCount() {
    setCount(count + 1);
  }


return <button onClick={handleCount}>{count}</button>
}

import React，{userState}来自“React”；
函数TestHook（）{
const[count，setCount]=useState（0）；
函数updateCount（）{
设置计数（计数+1）；
}
返回{count}
}

在这里检查一下

你可以在我的中篇文章（）中关注它

但这不是一个“错误”的解决方案，因为它直接依赖于国家吗

setState

将新状态合并到旧状态。并以“零碎”的方式进行，例如，新状态可以包含旧状态数据的一小部分。因此，将旧状态放在

setState

主体中并使用

this.setState（oldState=>（{…oldState，someProp:true}））显式合并它是有益的
“显式”更好，因为它表明您不会对
setState
将要做的事情抱有幻想：即使您没有这样做，也要进行合并

useState
将旧状态替换为新状态，因此访问旧状态的需求不那么迫切。即使我不介意

对于异步更新的
，
setState
和
useState
都可以批量更新。尽管在处理未决承诺时，
useState
不会进行批处理，这与示例中的“计数+1”等现成值不同

回到
setState
，还有另一个原因说明为什么flavor
setState（oldState=>（{…}）
更好。记住，
setState
无论发生什么都要进行合并。与批处理相结合，如果使用flavor
setState（newValue）
，它会导致React执行以下代码片段：

Object.assign（旧状态、新值1、新值2、新值3）


其中值
newValueX
是批处理更新。
Object.assign
确保“最后一次更新获胜”。如果
newValueX
系列表示连续尝试递增相同计数器，则可能无法按预期工作。因此
setState
的另一种风格更好。使用
useState
 批处理看起来这种危险仍然存在。
您可以通过.，了解如何用钩子替换生命周期方法。谢谢您的回答，但我的问题是“正确”状态更新。在您的示例中，您使用的是状态“计数”直接但不应该像我上面的例子那样在类组件中使用前面的值吗？