时间戳

首页 > 解决方案 > 理解 React useState() 钩子

javascript - 理解 React useState() 钩子

问题描述

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

我做了一个codepen示例来说明我的问题：

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

基于类的组件

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

功能组件

我错误地假设提供的语法和行为与setState()提供的useState()对应物非常相似Component。但是，我注意到这setState({foo: 'bar'})将替换整个状态，删除未通过的键。

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

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

我的问题是，我是否useState()从这两个方面都Component理解useState()正确，以及为什么选择这种行为。以及目前在 React 中处理状态的首选方式是什么。

标签： javascriptreactjsreact-hookssetstate

解决方案

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

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

如果您需要更多状态，您可以简单地添加更多useState的。如果你的状态更新逻辑变得有点复杂，你应该使用useReducer.

推荐阅读