什么是useState Hook，如何使用它？

最新推荐文章于 2025-06-17 10:11:42 发布

原创最新推荐文章于 2025-06-17 10:11:42 发布 · 972 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

167 篇文章

订阅专栏

什么是 useState Hook，如何使用它？

在 React 中，Hooks 是一种让你在函数组件中使用状态和其他 React 特性的方式。在众多的 Hooks 中，useState 是最基本也是最常用的 Hook 之一。它让你可以在函数组件中引入状态，使得组件更加灵活和强大。

什么是 useState？

useState 是一个函数，允许你在组件中添加状态变量。它返回一个状态变量和一个更新该状态的函数。使用 useState 可以让组件保持内部状态，避免在每次渲染时都从父组件传递状态。

useState 的基本语法

useState 的基本用法非常简单。你只需要传递状态的初始值，React 会返回一个包含当前状态和更新状态的函数的数组。

const [state, setState] = useState(initialState);

state 是当前的状态值。
setState 是一个函数，用于更新状态。
initialState 是状态的初始值，可以是任何类型（数字、字符串、对象、数组等）。

如何使用 useState？

1. 基本示例

让我们先来一个简单的示例：一个计数器。我们可以使用 useState 来管理计数的状态。

import React, { useState } from 'react';

const Counter = () => {
  // 使用 useState 初始化计数为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
};

export default Counter;

在这个示例中，点击“增加”按钮会将 count 的值增加 1，而点击“减少”按钮会将其减少 1。每当调用 setCount 更新状态时，组件会重新渲染，以反映最新的状态值。

2. 初始状态为对象

你还可以将状态初始化为一个对象，这在管理多个相关状态时很有用。

import React, { useState } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState({ name: '', age: 0 });

  const updateName = (e) => {
    setUser({ ...user, name: e.target.value });
  };

  const updateAge = (e) => {
    setUser({ ...user, age: parseInt(e.target.value) });
  };

  return (
    <div>
      <input type="text" placeholder="姓名" onChange={updateName} />
      <input type="number" placeholder="年龄" onChange={updateAge} />
      <p>姓名: {user.name}</p>
      <p>年龄: {user.age}</p>
    </div>
  );
};

export default UserProfile;

在这个示例中，我们使用一个对象来存储用户的姓名和年龄。通过使用对象扩展运算符（...user），我们可以在更新某个属性时保留对象的其他属性。

3. 函数形式的 setState

有时你会遇到需要基于前一个状态更新当前状态的情况。在这种情况下，你可以将一个函数作为 setState 的参数传入。

import React, { useState } from 'react';

const CounterWithFunction = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
};

export default CounterWithFunction;

在这个示例中，我们使用 setCount(prevCount => prevCount + 1) 这种形式更新状态。prevCount 代表之前的状态值，这避免了异步更新状态导致的 bug。

4. 使用数组中的状态

不仅可以使用对象，数组也可以作为状态管理，适用于列表等场景。

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  return (
    <div>
      <h3>待办事项</h3>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={() => addTodo('新的待办事项')}>添加待办事项</button>
    </div>
  );
};

export default TodoList;