当你刚开始用 React 写 TodoList 时几行代码就能跑通整个功能。不过，但因为需求增多，组件变得臃肿、状态混乱、调试困难…，这正是很多开发者在学习 React 通信时遇到的痛点。

常见使用者痛点

• **组件太大**：把输入框、列表、统计全部塞进一个 App，后期维护成本高。
• **状态散落**：子组件直接操作全局状态，容易出现数据不一致或覆盖错误。
• **回调命名混淆**：onAdd / onToggle 等看似普通事件，却是父子通信的关键。
• **不可变更新缺失**：直接修改数组导致 React 无法检测变化。
• **重复 State**：把计算得到的数量单独存为 State，容易出现同步错误。

拆分职责后的组件结构

App
├── TodoInput // 输入 & 提交
├── TodoList // 展示、切换、删除
└── TodoStates // 统计 & 清理已完成项

1️⃣ 确定状态归属

谁需要访问这份数据，就把它放在最近的共同父组件里。

• TotoList: 读取任务数组。
• TotoStates: 数量。
• TotoInput: 提交后向任务数组添加数据。

将共享的todos提高到App

function App {
const = useState();}

而不需要共享的数据仍保留在各自子组件中：

const TodoInput = => {
const = useState;}

2️⃣ Props 向下传递数据

A​pp 把所需数据和操作回调通过 Props 下发：

TotoList 接收只读的todos并渲染：

const TodoList = => (

{todos.length === 0?(

No todos left
) : (
todos.map(todo => (


 onToggle} />
{todo.text}

 onDelete}>Delete

))
)}

);

3️⃣ 子组件通过回调通知父组件

• TotoInput 在提交时调用父级提供的AddTodo 。
• TotoList 在切换/删除时调用对应回调。
• TotoStates 在清理时触发父级函数。

新增任务这方面，

const addTodo = => {
if ) return;

setTodos();}，

const TodoInput = => { const = useState;

const handleSubmit = => { e.preventDefault;onAdd，setInputValue;}，

return (

="" autofocus="" classname="todo-input" onchange="{" onsubmit="{handleSubmit}>" placeholder="What needs to be done?" setinputvalue}="" type="text" value="{inputValue}">

Add )};

Tip: 回调函数名称常以"on"开头，用于表达“某个操作发生时调用”。这与浏览器原生事件无关，只是约定俗成。

#4️⃣ 用不可变更新保持数据流清晰#

• setTodos(todos.map(todo => todo.id===id?{...todo,completed:!todo.completed} : todo));
• setTodos);const clearCompleted = => setTodos);这些不可变操作让 React 能精准检测变化，避免“浅拷贝”误差。

#5️⃣ 不要重复保存派生数据#

`total`,`active`。`completed` 都可以直接从`todos`推导，无需单独存 State：

const activeCount = todos.filter.length;const completedCount = todos.length - activeCount;

;

如果你把这些数量也放进 State。每次更新任务都得同步多份数据，很容易出现“列表已改但统计未更新”的 Bug。

#6️⃣ 完整的数据流示例#

1. `App` 把 `` 和 `onToggle` 下发给 ``；
2. `TodoList` 渲染复选框；
3. User 点击复选框 → `` 调用 `onToggle`；
4. `App` 的 `toggleTodos` 用 map 创建新数组；
5. `setTodos` 更新状态；
6. `React` 根据新的 Props 重渲染列表与统计信息。

##

• 再看确定归属，共享状态提高到最近共同父组件；单一使用留在内部，
• Props 向下传递，子组件只负责渲染。
• 回调函数上报，父侧处理业务逻辑。
• 不可变更新保持状态纯洁。
• 派生值即时计算避免冗余 State。

遵循这些原则。你的 TodoList 将拥有干净的数据流、易维护的结构，而且每一次交互都能保持 UI 与业务逻辑同步——真正实现「一份可信来源」！老实说，

---