React useState Hook（钩子）

React useState Hook（钩子）允许我们跟踪功能组件中的状态。

状态通常是指需要在应用程序中跟踪的数据或属性。

导入 useState

要使用 useState 钩子, 我们首先需要将其导入我们的组件中。

实例:

在组件的顶层导入 useState 钩子。

import { useState } from "react";

请注意，我们正在从 react 中解构 useState，因为它是一个命名的导出。

要了解有关 解构 的更多知识，请查看 ES6 部分。

初始化 useState

我们通过调用函数组件中的 useState 来初始化状态。

useState 接受初始状态并返回两个值：

• 当前状态。
• 更新状态的函数。

实例:

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

import { useState } from "react";
function FavoriteColor() {
  const [color, setColor] = useState("");
}

请再次注意，我们正在对 useState 返回的值进行解构。

第一个值，color 颜色，是我们当前的状态。

第二个值 setColor, 是用于更新状态的函数。

最后，我们将初始状态设置为空字符串：useState("")

读取状体

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

实例:

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

import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
  const [color, setColor] = useState("red");
  return <h2>My favorite color is {color}!</h2>
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

更新状态

为了更新状态，我们需要使用状态更新函数。

我们不应该直接更新状态。例如：不允许使用 color = "red"。

实例:

用一个按钮来更新状态:

import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
  const [color, setColor] = useState("red");
  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

State 的作用

useState 钩子可以用来跟踪字符串、数字、布尔值、数组、对象以及它们的任意组合！

我们可以创建多个状态钩子来跟踪单个值。

实例:

创建多个状态钩子:

import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");
  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}
ReactDOM.render(<Car />, document.getElementById('root'));

或者，我们可以只使用一个状态并包含一个对象！

实例:

创建一个对象的单个钩子:

import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });
  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}
ReactDOM.render(<Car />, document.getElementById('root'));

更新对象和数组的状态

如果我们只想更新汽车的颜色怎么办？如果我们只调用 setCar({color: "blue"})，这将从我们的状态中删除品牌、型号和年份。

我们可以使用 JavaScript 扩展操作符 来帮助我们。

实例:

使用 JavaScript 扩展操作符 仅更新汽车的颜色:

import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });
  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }
  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}
ReactDOM.render(<Car />, document.getElementById('root'));

因为我们需要状态的当前值，所以我们将一个函数传递到 setCar 函数中。这个函数接收以前的值。

然后我们返回一个对象，扩展 previousState 并只覆盖颜色。