怎么说呢，

学习 React 时很多人先写一个 App.jsx把所有代码塞进去。起初看起来没问题，但当页面功能增多时你会发现：

• 输入框、添加按钮、待办列表、完成状态、删除按钮、统计信息…，一堆功能混在一起。
• 代码迅速膨胀成一坨，让人摸不着头脑。话说回来，
• 后面想加筛选、排序或持久化时几乎每个文件都要改。

这正是使用者痛点代码可维护性差，功能 困难。React 组件化可以帮你解决这些痛点。

一、先画组件树。再写代码

痛点：直接写代码容易导致功能混乱，难以定位问题。

做法：

1. 先拆分职责：TodoInput + TodoList + TodoStats
2. 再决定数据流向：谁是数据总管？谁负责展示，谁触发事件？

组件树示例

二、谁需要数据。谁就管理它

痛点：不同组件需要同一份数据，却各自维护，导致同步错误。

共享状态放到最近的公共父组件中

const = useState();

本地状态只留在子组件内部

const = useState;// Only in TodoInput

判断标准这方面，

• "谁读取它？"
• "谁修改它？"
• If only one component uses it → keep it local.
• If multiple siblings use it → lift up to ir nearest common parent.

三、数据向下流，事件向上流

父 → 子：props 数据传递

子 → 父：回调函数传递事件

onToggle;onDelete，// Called from child when button clicked

为什么这样做？因为它让状态变化可追踪且可预测**。

四、受控组件：让表单值由 React 控制

输入框实现示例

 setInputValue}
placeholder="What needs to be done?"
/>

This ensures:

• The UI always reflects latest state.
• You can easily add validation or auto‑formatting in change handler.
• No direct DOM manipulation—React handles rendering.

五、不可变更新——保持新数组/对象

Pain point： "我直接 push 新任务后调用 setTodos，为什么 UI 不更新？"

setTodos();

setTodos(todos.map(todo =>
todo.id === id?{ ...todo,completed:!todo.completed } : todo
)); 

setTodos);

setTodos); 

不要这样写：修改原始数组/对象后再 setTodos

The rule is simple:

• Create a new array/object whenever you change data.
• Avoid mutating original state directly.
• This guarantees React will re‑render correctly and makes debugging easier.

六、完整流程示例——从输入到显示到底发生了什么?

• User types “买菜” into input。
• User clicks Add。
• Add function calls parent’s {addTodo}。which pushes new task into {todos}.
• The parent re‑renders and passes updated props down to {TodoList},which now displays “买菜”。{TodoStats} recalculates totals.
       
• This demonstrates data-driven UI—state changes drive rendering automatically.
       

七、常见误区

1️⃣ 拆得越多越好？

不是。按理说，过度拆分会让文件增多却缺乏实际意义。按理说，目标是职责清晰，而非文件数量。

1️⃣ 子组件直接改父状态？

错误！子只能通过回调通知父部件，让父来真正修改状态，以保证单向流。

1️⃣ 所有数据都放到 App？不过，

只要是多个兄弟共享的数据才需要提高。局部临时数据留在子内部即可。

1️⃣ 派生数据也要用 state？其实，

如果能从已有 state 推导出来就不要额外存储。避免两份数据不同步，

1️⃣ 可以直接 push 修改数组？

不建议。保持不可变更新才能让 React 正确识别变化并渲染。

八、面试答题技巧

• React 组件化思想 “把页面拆成职责明确的模块；父负责状态与协调，老实说，子负责展示与事件；通过 props 向下传递 data，通过回调向上传递 event。”

• 为何强调单向流 “让数据来源明确；避免隐藏的副作用，易于追踪与调试。老实说，”

• 什么是状态提高 “当多个组件共享同一份 state 时将其提到最近共同父级。由父统一管理并通过 props 分发。”

九

• 职责拆分把 UI 与逻辑按职责拆分为独立子组件。话说回来，
• 单一数据源所有共享 state 放在最近公共父级。
• 单向流data↓props，event↑callbacks。
• 不可变更新创建新对象/数组而非修改原始值。
• 受控表单输入值由 React 状态控制，可轻松做校验与格式化。

当你能把 Todo App 写成这样的结构时你已经掌握了 React 的主要思维——“父管 data。子管 view”，这就是最实用的组件化原则，也是未来更复杂项目的基石。