React 井字棋教程：用一个小游戏理解组件和状态

实际项目里，React 学习最容易出现的问题不是概念没看过，而是看完官网后不知道如何落到代码：组件应该怎么拆，状态放在哪里，什么时候该用 Effect，什么时候只是普通事件处理。本文围绕 教程实战 中的一个明确主题，把官网概念改写成可执行步骤，并配上代码、验证方法和排查清单。

这一篇会解决四个问题：

这个主题在真实项目里解决什么问题。
最小可运行代码应该怎么写。
代码中每个边界分别负责什么。
出现异常时从哪里开始排查。

1. 用一个小游戏理解组件和状态先解决哪类项目问题

React 井字棋教程：用一个小游戏理解组件和状态的核心不是背 API，而是把界面变化和数据流关系整理清楚。实际开发时，先不要急着写复杂页面，可以先问三个问题：用户触发了什么行为，哪些数据会变化，哪些组件需要重新展示。

判断点	需要确认的内容	常见错误
行为入口	点击、输入、加载、路由变化	把所有逻辑写进一个组件
数据来源	Props、State、Context、外部系统	状态重复或互相矛盾
更新结果	哪些 UI 依赖这个数据	修改变量但界面不刷新

如果能把这三件事写清楚，后面的组件拆分和 Hook 选择会简单很多。

2. 为用一个小游戏理解组件和状态准备最小练习环境

建议先用 Vite 建一个干净项目。这样可以避免被路由、UI 库和历史代码干扰。

bash 复制代码

npm create vite@latest react-learn-03 -- --template react
cd react-learn-03
npm install
npm run dev

代码解释：

react-learn-03 是本篇练习项目名，可以替换成自己的目录。
--template react 生成普通 React 项目。
先跑通空项目，再加入本篇示例代码。

3. 用一个小游戏理解组件和状态的第一段可运行代码

下面代码只保留本篇主题需要的最小逻辑。先让它跑起来，再逐步扩展业务。

jsx 复制代码

function Profile({ name, avatar, children }) {
  return (
    <article className="profile-card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <div>{children}</div>
    </article>
  );
}

export default function App() {
  return (
    <Profile name="Ada Lovelace" avatar="/ada.png">
      <p>这是一个可复用的 React 组件。</p>
    </Profile>
  );
}

代码解释：

组件只暴露清晰输入，不把外部数据来源写死。
事件处理函数只处理当前交互，不直接修改 DOM。
状态更新使用 React 推荐的声明式写法。
如果这个示例不能运行，先回到项目依赖和文件导入排查。

4. 把用一个小游戏理解组件和状态放进清晰的组件边界

真实业务不要把所有代码都放在 App.jsx。更稳的目录可以这样组织：

text 复制代码

src/
  App.jsx
  components/
    ExamplePanel.jsx
  data/
    sampleData.js
  hooks/
    useExampleState.js

代码解释：

components 放 UI 组件。
data 放静态示例数据或 mock 数据。
hooks 放可复用逻辑，不要把所有 Hook 都塞进页面组件。
App.jsx 负责组合，而不是承担所有业务。

5. 用一个小游戏理解组件和状态的第二个真实场景

同一个概念通常会在第二个场景里暴露问题。例如列表需要 key，状态需要不可变更新，Effect 需要清理函数，Context 需要拆分 Provider。

jsx 复制代码

function CheckResult({ ok }) {
  return ok ? <p>示例运行正常</p> : <p>请回到排查清单逐项确认</p>;
}

代码解释：

这段代码演示的是主题的扩展用法。
扩展时仍然保持输入和输出清晰。
如果数据来源发生变化，先调整数据结构，再调整 UI。

6. 如何验证用一个小游戏理解组件和状态写对了

可以按下面步骤验证：

启动项目后页面无报错。
修改输入或点击按钮后 UI 按预期变化。
React DevTools 中能看到组件 Props 和 State 的变化。
刷新页面后不会出现控制台异常。
删除某个子组件后，父组件职责仍然清楚。

验证时不要只看页面"好像能显示"，还要看状态变化是否符合预期。

7. 用一个小游戏理解组件和状态常见问题排查

现象	高概率原因	处理方式
页面不更新	修改了普通变量或直接改对象	使用 State 或不可变更新
子组件拿不到数据	Props 名称不一致	对齐父子组件字段
列表渲染异常	key 不稳定	使用数据 id，不用随机数
Effect 重复执行	依赖不稳定	拆分事件和 Effect 逻辑
状态互相覆盖	状态结构设计不合理	合并相关状态或使用 Reducer

排查时先看控制台，再看 React DevTools，最后回到组件边界。

8. 围绕用一个小游戏理解组件和状态做 5 个练习

把示例中的文案换成自己的业务场景。
新增一个子组件，让父组件只负责传数据。
加一个异常分支，例如空数据、加载中或禁用态。
用 React DevTools 查看 Props 和 State。
写一段 README，说明这个组件的输入和输出。

这些练习比单纯复制代码更重要，因为它能确认你是否真的理解了数据流。

9. 用一个小游戏理解组件和状态在团队项目里的落地规则

在团队项目里使用这个主题时，建议遵守三条规则：

先写清楚数据流，再拆组件。
组件名体现业务含义，不用 Demo、Test 这类临时名。
每次引入新 Hook，都说明它解决的是状态、缓存、DOM 还是外部系统同步问题。

这样写出来的 React 代码更容易维护，也更容易给别人讲清楚。

10. 用一个小游戏理解组件和状态的收束总结

React 井字棋教程：用一个小游戏理解组件和状态的学习重点，是把官网概念转成可运行代码，再从代码反推组件边界和状态归属。真正掌握以后，你不只是知道 API 名称，而是能判断什么时候该用它、代码应该放在哪里、出错时应该从哪一层开始排查。

用一个小游戏理解组件和状态的官方参考出处

本文根据 React 中文官网学习文档整理，原文入口：

text 复制代码

https://zh-hans.react.dev/learn/tutorial-tic-tac-toe

React 井字棋教程：用一个小游戏理解组件和状态