Frontend Academy · 课时

useState Hook：状态与重新渲染

Q: 「useState Hook：状态与重新渲染」这节课中我会学到什么？

调用 useState 为组件添加本地状态，使用设置函数更新状态，并了解 React 何时以及为何重新渲染。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

调用 useState 为组件添加本地状态，使用设置函数更新状态，并了解 React 何时以及为何重新渲染。

useState Hook：状态与重新渲染 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是状态

状态是会随时间变化的数据，并且这种变化应该使用户界面更新。与普通变量不同，状态变化会触发 React 使用新值重新渲染组件。

useState 语法

useState(initialValue) 会返回一个元组：当前值和设置函数。请立即将其解构。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

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

TypeScript：为 useState 指定类型

TypeScript 会根据初始值推断类型。当初始值不明确（例如 null 或空数组）时，请添加显式类型参数。

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

状态变化时重新渲染

调用设置函数会安排重新渲染。React 会使用新的状态值再次调用您的组件函数。返回的 JSX 会替换虚拟 DOM 中上一次渲染的内容。

状态更新是异步的

状态更新会批量处理，并在下一次渲染前应用，而不是立即应用。请不要在同一个事件处理函数中读取更新后的状态——新值要到下一次渲染时才可用。

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

函数式更新

当新状态取决于之前的状态时，请使用设置函数的函数式形式。这样可以避免闭包过期错误。

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

使用对象管理状态

当状态是对象时，请始终创建新对象，不要修改现有对象。React 会按引用进行比较；修改对象不会触发重新渲染。

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

多个状态变量

对于彼此独立的状态变量，请多次调用 useState。当这些值不会一起变化时，这比使用一个大型状态对象更清晰。

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

延迟初始化

如果初始状态需要进行开销较大的计算，请将函数传递给 useState。该函数只会在第一次渲染时运行，而不是每次重新渲染时运行。

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

何时不应使用状态

并非每个变量都需要成为状态。派生值（total = items.reduce(…)）应在渲染期间计算，而不是存储在状态中。派生自属性的状态通常意味着过度设计。

提升状态

当两个同级组件需要共享状态时，请将状态提升到它们共同的祖先组件，再将其作为属性向下传递。这是在使用上下文或状态存储之前，React 中最基本的状态管理模式。

快速检查

为什么应使用函数式形式 setCount(prev => prev + 1)，而不是 setCount(count + 1)？

回顾：useState

useState 返回 [value, setter]。初始值会确定类型（也可以使用显式泛型）。设置函数会触发重新渲染。当新状态依赖旧状态时，请使用函数式更新。对象：始终展开并创建新对象，绝不直接修改。对于开销较大的计算，请使用延迟初始化。当同级组件需要共享状态时，将状态提升到共同的祖先组件。

常见问题解答

「useState Hook：状态与重新渲染」课时是免费的吗？

是的 — 「useState Hook：状态与重新渲染」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「useState Hook：状态与重新渲染」这节课中我会学到什么？

调用 useState 为组件添加本地状态，使用设置函数更新状态，并了解 React 何时以及为何重新渲染。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「useState Hook：状态与重新渲染」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy