React 父子组件数据传递：机制与意义解析

在 React 组件化开发中，组件间的通信是构建复杂应用的核心环节。本文以一个 Todo 列表应用为例，详细解析父子组件的数据传递方式及其背后的设计意义。

一、组件结构与通信场景

在提供的 Todo 应用中，存在明确的组件层级关系：

父组件 ：App 组件作为根组件，是整个应用的核心
子组件 ：TodoInput（输入框）、TodoList（列表展示）、TodoStatus（状态统计）三个子组件，均由 App 组件直接渲染

这些组件需要协同工作：输入框添加待办项、列表展示所有项、统计区显示数量并提供清除功能。这种协同依赖于组件间的数据传递。

二、父子组件数据传递的核心方式

React 中父子组件的通信遵循单向数据流 原则，通过 props 实现数据传递，具体分为两种方向：

1. 父组件 → 子组件：通过 props 传递数据

父组件将需要共享的数据通过 props 传递给子组件，子组件通过接收 props 来使用这些数据。

示例解析：

在 App 组件中，定义了核心数据 todos（待办项列表），以及基于 todos 计算的统计数据（total、active、completed）
父组件通过 props 将这些数据传递给子组件：

xml 复制代码

// App.jsx 中传递数据给子组件
<TodoList todos={todos} ... />
<TodoStatus total={todos.length} active={activeCount} completed={completedCount} ... />

子组件通过解构 props 接收并使用数据：

javascript 复制代码

// TodoList 接收并展示 todos 数据
const { todos } = props;
// 渲染 todos 列表
todos.map(todo => (...))

// TodoStatus 接收并展示统计数据
const { total, active, completed } = props;
<p>Total: {total} | Active: {active} | Completed: {completed}</p>

2. 子组件 → 父组件：通过回调函数传递数据变更请求

子组件不能直接修改父组件传递的数据（React 中 props 是只读的），需通过调用父组件传递的回调函数，将数据变更的需求传递给父组件，由父组件负责更新数据。

示例解析：

父组件定义修改数据的方法（如 addTodo、deleteTodo），并通过 props 将这些方法传递给子组件：

ini 复制代码

// App.jsx 中定义方法并传递
const addTodo = (text) => {
  setTodos([...todos, { id: Date.now(), text, completed: false }]);
};

<TodoInput onAdd={addTodo} />
<TodoList onDelete={deleteTodo} onToggle={toggleTodo} />

子组件触发用户操作时，调用父组件传递的回调函数，传递需要变更的数据：

scss 复制代码

// TodoInput 接收 onAdd 方法，在提交时调用
const { onAdd } = props;
const handleSubmit = (e) => {
  e.preventDefault();
  onAdd(inputValue); // 将输入的文本传递给父组件
  setInputValue('');
};

// TodoList 接收 onDelete 方法，在点击删除时调用
<button onClick={() => onDelete(todo.id)}>X</button>

三、这种传递方式的核心意义

数据集中管理，保持单一数据源 所有核心数据（todos）由父组件 App 统一持有和管理，子组件仅通过 props 获取数据或请求修改。这种设计避免了数据分散在多个组件中导致的 "数据混乱"，便于追踪数据的变更历史。
明确组件职责，实现关注点分离
- 父组件：专注于数据的存储、计算和更新逻辑（如 addTodo、deleteTodo 方法）
- 子组件：专注于 UI 展示和用户交互（如 TodoInput 处理输入、TodoList 展示列表）职责分离让组件更易于维护和复用，例如 TodoList 仅依赖传入的 todos 和回调函数，可在其他场景中直接复用。
单向数据流，提升可预测性数据只能从父组件流向子组件，子组件的变更需求必须通过父组件处理。这种单向流动让应用的状态变化可预测，当出现问题时，能快速定位到数据变更的源头（父组件的方法），降低调试难度。
间接实现兄弟组件通信 兄弟组件（如 TodoInput 和 TodoList）本身无法直接通信，但通过父组件作为 "中介"，可间接实现数据同步。例如：TodoInput 添加新项后，父组件更新 todos，TodoList 因接收的 todos 变化而重新渲染，实现了兄弟组件的状态协同。