手册

React Hooks

What is a Hook? useState useEffect useContext useRef useReducer useCallback useMemo Custom Hooks

首页大前端 React React 教程

useState

阅读2248

更新时间2025-08-20

What is a Hook?

useEffect

React useState Hook 允许我们跟踪函数组件中的状态。

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

导入`useState`

要使用 useState Hook，我们首先需要将它import到我们的组件中。

实例:

在组件的顶部，import useState Hook。

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/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return My favorite color is {color}!
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

更新状态

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

我们不应该直接更新状态。例如:color = "red" 是不允许的。

实例:

使用按钮更新状态:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      My favorite color is {color}!
      
    
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

Hook 可以持有什么

useState Hook 可用于跟踪字符串、数字、布尔值、数组、对象以及这些的任意组合！

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

实例:

创建多个状态 Hooks:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      My {brand}
      
        It is a {color} {model} from {year}.
      
    
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

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

实例:

创建一个包含对象的单个 Hook:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      My {car.brand}
      
        It is a {car.color} {car.model} from {car.year}.
      
    
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

由于我们现在跟踪单个对象，因此我们需要在渲染组件时引用该对象，然后引用该对象的属性。（例如:car.brand）

更新状态中的对象和数组

当状态更新时，整个状态都会被覆盖。

如果我们只想更新汽车的颜色怎么办?

如果我们只调用 setCar({color: "blue"})，这将从我们的状态中删除品牌、型号和年份。

我们可以使用 JavaScript 扩展运算符来帮助我们。

实例:

使用 JavaScript 扩展运算符仅更新汽车的颜色:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      My {car.brand}
      
        It is a {car.color} {car.model} from {car.year}.
      
      
    
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

因为我们需要 state 的当前值，所以我们将一个函数传递给我们的 setCar 函数。这个函数接收之前的值。

然后我们返回一个对象，传播 previousState 并仅覆盖颜色。