用 useState 管理本地状态

用 useState 给你的组件赋予记忆，从而显示那些随用户交互而变化的值。

8 分钟 · 3 题

一个点赞计数器、搜索框里输入的文字、一个开合的菜单：所有这些值都会在应用被使用时发生变化。普通的变量还不够，因为当它变化时 React 并不会刷新屏幕。你需要的是所谓的状态：属于组件的记忆。你用 useState 来创建它，useState 是一个 hook，也就是 React 提供的、名字以 use 开头的特殊函数。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

我们来拆解这行关键代码：const [count, setCount] = useState(0);。useState(0) 创建了一个初始值为 0 的状态，并返回一个含两个元素的数组，你通过解构把它们取出来：count 是当前值，而 setCount 是更新函数，是唯一被允许用来改变该值的方式。这里，onClick 在每次点击时触发 setCount(count + 1)（我们会在下一课详细讲解事件）。

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

当你调用 setName 时，React 会做两件事：它先存储新值，然后重新运行你的组件函数来重新计算输出。这就叫作重新渲染（re-render）。这就是为什么 Hello, {name}! 这个段落会随着每键入一个字母就自动更新：你描述结果，剩下的交给 React。

知识检测

确认你已牢记本课的重点内容。

1. 调用 useState(0) 会返回什么？
   • 只返回状态的当前值
   • 一个包含当前值及其更新函数的数组
   • 一个包含组件全部状态的对象
2. 增加计数器的正确方式是哪一个？
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. 当你调用某个状态的更新函数时，会发生什么？
   • React 重新运行组件以刷新显示
   • 整个页面在浏览器中被重新加载
   • 什么都不会发生，你还得手动刷新页面