别光看教程！手把手拆解 React Todo 项目。一文吃透 5 大主要概念

前言

学习 React 时最常见的困境是：视频里说得轻松，但真正写代码时总是卡住。原因往往不是知识点本身，而是零散的知识点没有建立完整的思维网络。这里通过一个简洁的 Todo 应用。把这些知识串成一条完整链路，方便你搭建自己的项目。

项目概览

Todo 待办事项应用基本功能：

• 输入文字 → 添加一条待办任务
• 点击勾选框 → 切换完成状态
• 点击 Remove → 删除任务
• 顶部显示总计 / 进行中 / 已完成数量
• 一键清除所有已完成的任务

目录结构示例

src/
├── App.jsx // 父组件：管理数据
├── main.jsx // 入口文件
├── components/
│ ├── TodoInput.jsx // 输入框 + 添加按钮
│ ├── TodoStates.jsx // 数量统计 + 清除按钮
│ └── TodoList.jsx // 列表渲染
└── index.css // 样式文件

组件树可视化

App
├─ TodoInput
├─ TodoStates
└─ TodoList

This is essence of component thinking**: each component does one thing well.

从概念一来看。组件化与组件树 — 拿到需求先拆分

"把页面拆成可复用的小块". 就像乐高积木，一个简单的块可以拼出复杂结构。这样做可以让代码更易维护、可复用、易测试。

项目如何拆分？

A. No Split Case： 所有逻辑塞进一个文件，修改一处很可能影响其他地方。

// ❌ 不拆分 —— 冗长混乱
const App = => {
/* 输入框逻辑 */
/* 列表渲染 */
/* 状态统计 */
/* 删除操作 */
return (

{/* input */}
{/* stats */}
{/* list */}

);}

B. SPLIT Case： 将功能按职责拆成独立文件。

// ✅ 拆分后 —— 简洁清晰
const App = => {
/* 数据与主要原因放这里 */
return (





);}

痛点：

• MVC 混乱 → 难定位 bug；
• Cohesion low → 难
• TDD 与协作受阻；
• Troubleshooting 时必须翻阅数百行代码。

概念二的观点是，useState — 给组件装上“记忆芯片”

MVC 中的“无记忆”视图在 React 中默认重新渲染。怎么说呢， 让每个函数式组件获得持久状态。就像给金鱼装上记忆芯片，让它们能记住过去。

代码实现示例

const = useState();
  ，  ，// todos：当前数据，只读
  ，  ，// setTodos：唯一写入方法
  ，  ，// 初始值仅在第一次渲染时生效

setTodos;// 正确写法

如果直接 `todos.push` 或 `todos = `。React 不会知道状态变更，UI 永远不会刷新。这就是为什么你经常看到 “state 改完 UI 没反应”的错误。 

为什么不能直接改？

• React 的渲染机制 基于“状态变化就重渲染”。
• 当你直接赋值或调用数组方法改变原对象时并未触发内部变更检测。按理说，
• 必须通过 setTodos 通知 React。 这才会走一次渲染循环，

小技巧

js // 用 运算符生成新对象/数组，保持不可变性： setTodos;// 新增 setTodos);// 修改 setTodos);// 删除

---

使用者痛点

痛点	对应方法
写完 useState 后 UI 没变化	确认使用 setXxx 而非直接赋值
想批量更新数组导致报错	使用不可变更新模式

---

至于概念三，父子通信—数据向下流、事件向上报

主要规则

1. 父持有状态子只读。
2. 父通过 向子传递数据或回调函数。
3. 子通过回调通知父操作，接下来父更新状态并自动触发重渲染。

示例流程

jsx // Parent -> Child

// Child -> Parent ="" checked="{todo.completed}" onchange="{" ontoggle}="" type="checkbox"/>

1. 使用者点击 checkbox → 子调用 onToggle。
2. 父收到回调 → 执行 toggleTodo 更新 state。
3. state 更新 → React 重渲染整个树→ 子收到新 props 并重新显示。

---

三种 props 类型

类型	示例	用途
数据传递		子读取并展示
回调传递		子通知父添加
计算结果	​	父计算后直接展示

---

再看概念四，不可变数据 – .map 与 .filter 的魔法

为什么需要不可变？

• 性能调整 – 对比旧旧 vs 新旧能快速判断是否需要重绘。
• 避免副作用 – 防止意外修改共享引用导致难以追踪 bug。

常见模式

新增

jsx const add = txt => setTodos。text: txt,completed:false},...prev]);

修改单项

jsx const toggle = id => setTodos(prev => prev.map(t => t.id === id?{...t,completed:!t.completed } : t));

删除

jsx const remove = id => setTodos);

---

小结对比

Metho.d 操作类型	Description
.map	PRESERVE LENGTH—transform every element.
.filter	PRESERVE CONDITION—keep only matched elements.
.spread	Create NEW ARRAY/OBJECT—never mutate old.
.reduce	"Fold" values into a single result.
.concat	Add elements without mutation.
.slice	Create subarray copy.
.splice	➜ avoid unless necessary!按理说，
*代表可组合使用。如 map+filter 或 spread+map 等。

---

从概念五来看，受控组件 – 面试必问但实战简单

什么是受控？

当输入框或 checkbox 的 value/checked 完全由 React state 控制，而不是浏览器自身决定时即为受控。其实，

示例 - 输入框

jsx const = useState;return ( setValue /> );

示例 - Checkbox

jsx onToggle} />

为什么要用？

1. Single Source of Truth – 所有 UI 状态都存储在 state，可随时访问、校验和恢复。
2. 同步交互 – 如提交表单、清空输入等，只需读取/写入同一个变量即可。

如果不受控。你只能依赖浏览器 DOM 获取值，无法统一管理，也容易出现验证失败或 UI 与数据不同步的问题。

---

• 掌握五大主要组件化、useState、父子通信、不可变数据、受控组件。
• 每个主要都配有 让你不仅能记住还能灵活运用。
• 在实际项目中。你会发现自己不再因为“到底怎么改 state”“怎么让父子交互”而停滞不前，而是能够自如地拆分功能、调整性能和提高可维护性。按理说，

祝你在下一个 React 项目中顺利驾驭这五大主要。实现从 “看教程卡住” 到 “自己建立完整应用”的跨越！

---