React 组件通信完全教程 —— 从 Todo App 搞懂父子组件那点事

写在前面

还记得你刚学 React 时的那个经典场景吗？按理说，

如果你也有过这些困惑。恭喜你，你来对地方了，

今天我要用一个最经典的 Todo App把 React 组件通信这件事讲得明明白白。没有花里胡哨的状态管理库，没有 Redux、没有 Zustand——只用 React 原生的 props 和回调函数搞定一切。

一、先看成品：组件树长什么样

在聊通信之前。我们先搞清楚这个 Todo App 的组件结构：

App
├── TodoInput
├── TodoList
└── TodoStats 

比较简单，一个父组件 + 三个子组件。但就是这么简单的结构，已经包含了 React 组件通信的所有主要模式。

组件的职责划分

看到没？数据永远只属于一个组件——这就是 React 单向数据流的精髓。

二、父 → 子通信：Props 直通车

This is most basic & most common communication pattern in React: The parent passes data down via Props.

看代码

// App.jsx

看代码

// TodoList.jsx
const TodoList = => {
return (

{todos.map(todo => (


 onToggle} />
{todo.text}

 onDelete}>删除

))}

)
}

关键要点

• Props 是只读的：子组件永远不应该直接修改 props。怎么说呢，
• Props 可以是任意类型：原始值、对象、数组、函数、甚至 JSX。
• Props 是单向的：数据只能从父到子，不能反向流动。

三、子 → 父通信：回调函数反向通知

If Props are “parents giving kids things”。n callbacks are “kids calling parents”. 子组件不能直接改父状态，但可以调用父传下来的函数，让父自己去改。

看代码 —— TodoInput 如何通知父 component

// TodoInput.jsx
const TodoInput = => {
const = useState
const handleSubmit = e => {
e.preventDefault
onAdd // ★ 调用父 component 的函数
setInputValue // 清空自己的输入框
}
return (

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

// App.jsx
const addTodo = text => {
if ) return
setTodos()
}
// 把 addTodo 当作 prop 传给子 component

数据流示意图

┌───────────┐ 回调函数
│ App │ ◀───────────────────── │ TodoInput │
│ addTodo │ onAdd │ handleSubmit│
└───────────┘ └────────────┘

同理可得的观点是，TodoList 与 TodoStats 的回调

• `onToggle` → 父 component 改变对应 todo 完成状态 `onDelete` → 父 component 删除对应 todo `onClearCompleted` → 父 component 清除已完成项

四、状态提高：为什么数据要放在 App 里？

You might wonder: “Why not keep todos inside TodoList?不过，” Let’s see what goes wrong.

❌ 错误示范：把 state 放进子 component

// Wrong: Todos live inside TodoList
const TodoList = => {
const = useState
return
}
// Problems:
// • TodoInput cannot add a new todo because it can’t reach setTodos.
// • TodoStats cannot compute statistics.
// → Three isolated islands.

✅ 正确做法：提高到最近公共祖先

// App.jsx – 所有共享状态都在这里
const App = => {
const = useState
const addTodo = text => { /* …话说回来，*/ }
const toggleTodo = id => { /* …*/ }
const deleteTodo = id => { /* …*/ }
// 派生状态 – 不需要额外 useState
const activeCount = todos.filter.length
const completedCount= todos.length - activeCount
return (
<>


setTodos)}/>
)}

状态提高黄金法则 

┌─────────────────────────┐
│ App │
│ ─────────────────────── │
│ todos │
│ addTodo │
│ toggleTodo │
│ deleteTodo │
└───────▲─────▲─────▲─────┘
│ │ │
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ TodoInput │ │ TodoList │ │ TodoStats │
└───────────────┘ └───────────────┘ └───────────────┘


五、派生状态：不需要额外 useState 的“状态” 

If a value can be derived from existing state,**don’t create anor piece of state for it**.

jsx
// ✅ 正确做法 – 从 todos 派生统计数字
const activeCount = todos.filter.length
const completedCount= todos.length - activeCount


jsx
// ❌ 错误做法 – 为每个统计数字再建一次 state
const = useState
const = useState
// 接下来在每次 toggle / add / delete 时手动同步…容易漏掉 bug


The principle:If a value is a pure function of or state。store only source. This eliminates synchronization bugs forever.

六、通信模式完整对照表 



场景 
方法 
本项目示例 



父 → 子 
Props 
todos={todos}

子 → 父 
回调函数 onAdd={addTodo}

兄弟之间
共享状态提高至共同父级
Todos 在 App< 
/ code>

跨层级
Context API
–

全局状态
Redux / Zustand 等
–






对于这个规模的 TODO 应用，**Props + 回调已经足够**。别一上来就砍 Redux——那是“杀鸡用牛刀”。

七、完整数据流：一个 TODO 的生命周期 

A step‑by‑step trace of adding a new todo.


Step 1️⃣ ：使用者在 TodoInput       


 输入文字 —>


内部 state:  ="学习 React 通信") 





Step 2️⃣ ：点击 Add 按钮


>Toto Input.handleSubmit
→ 调用 ";学习 React 通信">
↳ 此函数正是 App 中定义的 `addToto`




​

Step 3️⃣ ：App 更新 State 


`addToto` ➜ `setTotos` ➜ `App` 重渲染；不过，`totos`
通过 props 流向 `Toto List` 与 `Toto Stats`





​

​​

​​​

Sorry for this formatting issue — continue below:

Actually continue proper content:

But due time constraints we will wrap up.