React 中的状态管理（适合初学者的指南）

Source: Dev.to

（请提供您希望翻译的正文内容，我将为您翻译成简体中文。）

什么是“State”——通俗解释？

State 就是应用运行时可以改变的数据。
把 React 应用想象成一个 活的页面，而不是静态网站。

现实生活中的 state 示例

• 灯是 开还是关？
• 购物车里有多少件商品？ → 3
• 用户是否已登录？ → true / false
• 用户在输入框中输入了什么？ → "John"

所有这些值都可能会变化，而当它们变化时，屏幕应该随之更新。这些可变的数据就是 React 所称的 state。

那么，什么是“状态管理”？

状态管理是你如何存储、更新和共享状态。

通俗来说：

“我把数据放在哪里，不同部分的应用如何使用它？”

就是这样。没有魔法。

在使用 React 之前：纯 HTML + JavaScript 的工作方式

let count = 0;

function increase() {
  count++;
  document.getElementById("count").innerText = count;
}

这里发生了什么

• count 是你的 状态。
• 你使用 getElementById 手动更新页面。

这种方式适用于小型应用，但在大型应用中会导致：

• 难以追踪变化
• 容易出现错误
• 非常重复的代码

React 的核心理念（这很重要）

当状态改变时，React 会自动更新屏幕。

你 不需要手动操作 DOM。相反：

1. 你更新状态。
2. React 为你重新渲染 UI。

正是这个单一理念造就了 React 的存在。

您的第一个 React 状态示例

import { useState } from "react";

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

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

这里发生了什么？

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

• count → 状态的当前值
• setCount → 用于更新状态的函数
• 0 → 初始值

当调用 setCount 时：

• React 更新 count
• React 重新渲染组件
• UI 自动更新

您永远不需要手动操作 HTML。

必须记住的规则

永远不要直接更改状态。
始终使用 setter 函数。

此规则可防止错误并保持 React 的控制。

什么是组件？

A component is just a JavaScript function that returns UI.

function Greeting() {
  return <h2>Hello</h2>;
}

Each component:

• 是独立的
• 可以拥有自己的状态
• 当状态改变时会重新渲染

本地状态（简易级）

本地状态仅属于 单个组件。

示例

• 按钮的打开或关闭状态
• 输入字段的值
• 切换开关
• 模态框的可见性

const [isOpen, setIsOpen] = useState(false);

Mental model: “此数据仅属于此处。”

Source: …

第一个你会遇到的问题：共享状态

想象一下这种情况：

• 组件 A 登录用户
• 组件 B 需要知道用户是否已登录

它们是 独立的组件，但需要相同的数据。
现在怎么办？这就是 状态管理开始变得重要 的地方。

Step 1: 提升状态（React 的原生解决方案）

最简单的办法是将状态提升到 父组件。

function App() {
  const [user, setUser] = useState(null);

  return (
    <>
      {/* Pass user and setUser down as props */}
    </>
  );
}

工作原理

• 父组件拥有状态。
• 子组件通过 props 接收数据或函数。

✔️ 简单
❌ 在大型应用中会变得混乱

第 2 步：全局状态（适用于更大的应用）

当许多组件需要相同的数据（例如，已登录用户、主题、购物车项目、通知）时，通过多层传递 props 会变得非常痛苦。这个问题称为 prop drilling。

为了解决它，我们使用 global state。

常用的 React 状态管理选项

1️⃣ React Context（内置）

React Context Docs

适用场景： 身份验证、主题、语言设置

“让数据在任何地方可用，而无需逐层传递 props。”

✔️ 无需额外库
❌ 若使用过度会变得混乱或性能下降

2️⃣ Redux / Redux Toolkit

Redux Quick‑Start

适用场景： 大型应用、复杂的数据流

思维模型： “所有应用数据的统一中心存储。”

✔️ 可预测且结构化
❌ 需要学习更多概念

3️⃣ Zustand / Jotai（现代且轻量）

Zustand Docs

适用场景： 更简洁的全局状态、减少样板代码、快速上手

这些在现代 React 应用中非常流行。

最重要的思维模型

把 React 状态想象成后端数据：

一旦你这样看待，一切都会恍然大悟。

推荐学习路径（不要跳过步骤）

Especia（原始内容到此结束；请保持占位符不变。）

如果你偏向后端思维

学习 useState

• 学习传递 props
• 学习提升状态（lifting state up）

学习 useContext

• 然后学习 Redux 或 Zustand

Jumping straight to Redux is a very common beginner mistake.

一句话概括

React 中的状态管理其实就是关于你的可变数据存放在哪里，以及应用的不同部分如何访问和更新它。