javascript - 理解 React useState() 钩子(Hook)

Question

我正在使用 useState() 钩子(Hook)开发一个功能性 React 组件。我对这个钩子(Hook)的使用方式或其背后的设计决策有点困惑。

我制作了一个 codepen 示例来说明我的问题:

https://codepen.io/svenvandescheur/pen/ewwBwR

基于类的组件

在基于类的组件中，this.setState({foo: 'bar'}) 仅使用传递给第一个参数的对象中的键来更新状态。如果状态已包含不同的值，则这些值将保留在原处。

功能组件

我错误地认为 useState() 提供的 setState() 的语法和行为与 Component 提供的对应部分非常相似>。但是，我注意到 setState({foo: 'bar'}) 会替换整个状态，删除未传递的键。

可以通过使用扩展运算符在每次调用 setState() 时传递整个状态，然后添加更改来解决此问题，如下所示:setState({.. .state, foo: 'bar'}).

这感觉非常重复，在我的现实世界场景中甚至导致了一个错误，即新状态被旧状态覆盖。

我的问题是，我是否正确地将 Component 中的 useState() 理解为 useState()，以及为什么会出现这种行为选择的。目前在 React 中处理状态的首选方式是什么。

Answer 1

你的理解是正确的。 setState 会将当前状态和新状态合并在一起以创建一个新状态。 useState 将采用给定值并替换旧状态。

这种行为可能看起来不直观，但允许将原始值用作状态，例如字符串、数字和 bool 值。

如果您需要更多状态，只需添加更多 useState 即可。如果您的状态更新逻辑变得有点复杂，您应该使用 useReducer。