React 中的 useState 是什么？

React 中的 useState() hook 是一个 hook，它允许我们在函数组件中使用状态变量。

React 有两种组件。第一种是类组件，它是扩展自 React 的 ES6 类。第二种是函数组件。类组件有状态和生命周期方法：message 类扩展自 React。useState Hook 是一个特殊的函数，它将初始状态作为参数，并将其作为输入数组返回。

语法：第一个元素是初始状态，第二个是用于更新状态的函数。

如果初始状态是计算得出的，我们将其作为参数传递给一个函数。然后函数的返回值用作初始状态。

上面的函数是计算数字总和的行函数，它被设置为它的初始状态。

要使用 useState，我们需要像下面这样从 React 中导入 useState

useState() 是 React 库自带的一个内置函数。

useState() 只能在函数组件内部使用。

useState() 不能在类组件中使用。

useState() 返回一个元组。数组的参数是当前状态的值。第二个参数是允许更新状态值的函数。

React useState() 示例

创建 React 应用

步骤 1：使用以下命令创建 React 应用

步骤 2 创建项目（即文件夹名）后，通过以下命令或语法访问它

use State () 函数的实现

Application.js

运行应用步骤：从项目的根目录下使用以下命令运行应用

一个随机数初始化第一个 count 变量，使用一个随机函数，并使用 setRandomCount 来更新 count 状态。

每当我们点击 onClick 按钮时，它都会调用 click Handler 函数，该函数会用一个随机数重置 count 变量。

React 的 UseState Hook 允许在函数组件中跟踪状态。

状态是指需要在应用程序中跟踪的数据。

要使用 useState Hook，我们首先需要将其导入到我们的组件中。

初始化 useState

我们通过在函数组件上调用 use State 来初始化我们的状态。

useState 接受初始状态并返回两个值，如下所示

• useCase 的当前状态。
• 以及一个更新状态的函数。

示例 1

在函数组件的顶部初始化状态。

请注意，我们正在解构 useState 的返回值。

• 第一个值是 color，它是当前状态。
• 第二个值是 setColor，用于更新 useState。
• 这些变量名可以是我们喜欢的任何名称。
• 我们将初始状态设置为空字符串：useState(")。

现在我们可以在组件中的任何地方包含状态。

示例 2

在渲染的组件中使用状态变量。

输出

更新状态

我们使用更新的状态功能来更新状态。

我们绝不能直接更新状态。例如，不允许 color = "red"。

示例 3

输出

点击蓝色按钮后，它会变成蓝色，如下所示

状态可以保存什么？

UseState Hook 用于跟踪字符串，如数字、布尔值、数组、对象以及它们的其他组合。

我们创建多个状态 Hooks 来跟踪各个值。

示例 4

输出

你可以使用状态并包含一个对象！

示例 5

创建一个将保存对象的单个 Hook

输出

由于我们正在跟踪单个对象，因此我们需要引用该对象及其属性来渲染组件。当状态更新时，整个状态会被覆盖。

如果我们更新汽车的颜色怎么办？

如果我们调用 setCar({color: "blue"})，

它会从状态中移除 model 和 year。

我们使用 JavaScript 的扩展运算符来实现这一点。

示例 6

在这里，我们使用 JavaScript 的扩展运算符来更新汽车的颜色。

输出

这里，我们需要状态的当前值，我们将一个函数传递给 setCar 函数。该函数接收前一个值。

我们返回一个对象，扩展状态并仅覆盖汽车的颜色。

React 提供了许多 hooks，可以为组件添加功能。这些 hooks 是可以从 React 包导入的 JavaScript 函数。但是，hooks 可用于基于函数的组件，因此它们不能在类组件中使用。

什么是 useState，何时使用它？

React 提供了许多我们可以用于应用程序的 hooks。useState 和 useEffect 是我们经常使用的两个重要 hooks。

UseState 是一个函数，它一次只接受一个参数，即初始状态，并返回两个值：当前状态和状态值。

如果在 React 开发工具（console.log(useState)）中打印 useState() 函数，我们会注意到它返回一个包含你在 useState 函数中输入的参数的数组。

当你想在点击按钮后更改文本时，例如创建计数器，就会使用 UseState Hook。

useState 的简单示例

要使用 useState Hooks，你必须先将其从 React 包中导入。

这里有一个例子

现在，你可以毫无问题地开始在代码中使用 Hook 了。请看下面的示例

请注意，我们在这里在组件中使用了解构的 ES6 数组。因此，数组内的变量名指的是 useState 函数的参数。

另一方面，setName 变量指的是你添加以更新状态的函数。我们有一个状态 name 并调用 setName() 函数。

让我们通过 return 语句使用它

由于函数组件没有 setState() 函数，你必须使用 setName() 函数来更新它。这就是他如何将名字从 "Brad" 改为 "John" 的方式。

多状态

当你有多个状态时，可以根据需要调用 useState Hook。

示例

该 Hook 接收所有 JavaScript 的布尔值、数据类型，如字符串、数字数组和对象。

在这里，我们将介绍React.useState()的基础知识。

什么是 UseState Hook？

在 React 中，函数组件是无状态的，因为我们无法管理它们的。如果你编写了一个需要添加状态的组件，可以使用 React 16.8 的 useState Hook。

useState 允许为正在运行的组件添加 React 状态。

• count：它用作当前状态
• setCount：它是一个更新状态的函数

它类似于类组件中的this.state.count和this.setState，只是我们在它们成对出现时看到它们。

useState() Hook 是 Hook 的初始状态。状态不必是对象。

下面是一个使用类组件的计数器的代码片段。

我们想在函数组件中实现一个类似的计数器。

从 React App 导入 useState Hook

通过调用 useState Hook 声明一个新的状态变量。它返回一个值对，counterValue（表示点击次数）和 setCounter（用于更新 counter 值）。

通过将零作为 useState 参数，将 counterValue 初始化为零。

当用户点击 setCounter 并传入一个新值时，React 将重新渲染组件并将新的 counterValue 值传入。

结论

useState Hook 是我们应该了解的必要且有用的 Hooks 之一。此外，它允许函数组件拥有其内部状态和功能。