在 React 开发中，组件之间的通信是构建交互式应用的核心环节。尤其是当多个子组件需要共享或同步状态时，如何高效、清晰地实现通信机制就显得尤为重要。本文将以一个典型的 Todo 应用为例，深入探讨 React 中兄弟组件通信的实现方式，并展示如何通过"状态提升"与"单向数据流"原则，构建结构清晰、易于维护的应用逻辑。
项目结构概览
该 Todo 应用基于 React + Vite + Stylus 构建，整体结构简洁明了：
App.jsx：根组件，负责管理全局状态和核心逻辑；components/TodoInput.jsx：用于输入新任务；components/TodoList.jsx：展示任务列表，并支持完成/删除操作；components/TodoStats.jsx：显示任务统计信息，并提供清除已完成任务的功能。
这三个子组件彼此之间没有直接联系，但它们都需要访问或修改同一份任务数据（todos）。这种场景正是兄弟组件通信的典型用例。
状态提升：兄弟通信的关键策略
React 官方推荐的兄弟组件通信方式是将共享状态提升至最近的共同父组件 。在这个例子中，App 组件就是 TodoInput、TodoList 和 TodoStats 的共同父组件，因此它承担了以下职责：
- 持有共享状态 ：通过
useState管理todos数组； - 提供状态修改方法 ：如
addTodo、deleteTodo、toggleTodo、clearCompleted； - 将状态和方法通过 props 传递给子组件。
这种方式确保了数据流的单向性------所有状态变更都由父组件统一处理，子组件仅通过回调函数"请求"变更，而不能直接修改状态。这不仅避免了状态不一致的问题，也使得调试和测试更加容易。
初始化状态与本地持久化
在 App.jsx 中，todos 的初始值并非简单的空数组，而是尝试从 localStorage 中读取：
ini
const [todos, setTodos] = useState(() => {
const saved = localStorage.getItem('todos');
return saved ? JSON.parse(saved) : [];
});这里使用了 useState 的初始化函数形式，避免每次渲染都执行解析逻辑，是一种性能优化技巧。
同时，通过 useEffect 监听 todos 的变化，自动将其同步到本地存储：
javascript
useEffect(() => {
localStorage.setItem('todos', JSON.stringify(todos));
}, [todos]);这种"集中监听+自动持久化"的设计，避免了在每个状态修改函数中重复写入 localStorage，体现了关注点分离的原则。
子组件如何与父组件协作
1. TodoInput：提交新任务
TodoInput 组件内部维护一个局部状态 inputValue，用于控制输入框的内容。React 不支持v-model那样的双向绑定，通过单向绑定 + onChange 实现数据状态和视图的同步：
ini
<input
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
/>当用户提交表单时，调用父组件传入的 onAdd 回调：
scss
const handleSubmit = (e) => {
e.preventDefault(); // 阻止表单默认跳转
onAdd(inputValue); // 表单内容通过onAdd(父组件的自定义函数)进行添加 '打报告'
setInputValue(''); // 清空输入框 用户体验
};这里的关键在于：TodoInput 不关心 todos 是什么，也不直接操作它，只负责"通知"父组件"我想添加一个任务"。
2. TodoList：展示与操作任务
TodoList 接收完整的 todos 列表以及两个操作函数 onDelete 和 onToggle。它通过 map 渲染每个任务项，并为复选框和删除按钮绑定相应的回调：
ini
<input
type="checkbox"
checked={todo.completed}
onChange={() => onToggle(todo.id)}
/>
<button onClick={() => onDelete(todo.id)}>X</button>注意：onToggle 和 onDelete 都只传递 id，而不是整个 todo 对象。这种设计减少了不必要的数据传递，也使得父组件的处理逻辑更清晰。
3. TodoStats：展示统计与批量操作
TodoStats 接收任务总数、活跃数、已完成数，以及 onClearCompleted 函数。它根据 completed > 0 动态渲染"清除已完成"按钮：
css
{completed > 0 && (
<button onClick={onClearCompleted}>Clear Completed</button>
)}这种条件渲染提升了用户体验，避免在无可清除项时显示无用按钮。
核心状态操作逻辑解析
父组件 App 中定义了四个关键的状态更新函数，它们共同构成了应用的数据变更中枢。
添加任务：addTodo
ini
const addTodo = (text) => {
setTodos([...todos, {
id: Date.now(),
text,
completed: false
}]);
};使用展开运算符创建新数组，保证不可变性。这里只是简单id 使用 Date.now() ，这种用法在高频率添加时可能冲突。
删除任务：deleteTodo
ini
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};filter 方法返回一个新数组 ，仅包含 id 不等于目标值的项。这是 React 中删除列表项的标准做法。
切换完成状态：toggleTodo
ini
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};这里使用 map 遍历数组，对匹配 id 的项进行属性更新（使用展开语法保留其他字段），其余项保持不变。
清除已完成任务：clearCompleted
ini
const clearCompleted = () => {
setTodos(todos.filter(todo => !todo.completed));
};再次利用 filter，保留 completed 为 false 的项。逻辑简洁且高效。
兄弟组件通信的本质：间接但可靠
虽然 TodoInput、TodoList 和 TodoStats 在 UI 上是并列关系，但它们之间的"通信"并非直接发生。例如：
- 当
TodoInput添加一个新任务后，TodoList能立即显示它； - 当
TodoList删除一个任务后，TodoStats的计数会自动更新； - 当
TodoStats清除已完成任务后，TodoList会移除对应项。
这一切的实现，都依赖于 App 组件作为中央调度器：
- 子组件 A 触发回调 → 父组件更新状态；
- 父组件状态变化 → 所有接收该状态的子组件重新渲染；
- 子组件 B 和 C 自动获得最新数据。
这种模式虽然增加了父组件的职责，但换来的是清晰的数据流向 和可预测的状态变更，非常适合中小型应用。
总结与启示
通过这个 Todo 应用，我们可以提炼出 React 中兄弟组件通信的最佳实践：
- 状态提升：将共享状态置于最近的共同父组件；
- 单向数据流：子组件通过回调函数请求状态变更，不直接修改 props；
- 不可变更新 ：使用
filter、map、展开运算符等创建新数组/对象； - 逻辑集中管理：状态变更逻辑集中在父组件，便于维护和调试；
- 副作用统一处理 ：如本地存储，通过
useEffect集中监听状态变化。
这种架构虽然看似"绕远路"，但正是 React 响应式编程思想的体现：状态驱动视图，视图触发状态变更，形成闭环 。对于更复杂的状态管理需求，开发者可以进一步引入Zustand、Redux 等状态库，但其核心思想------单一数据源、明确的数据流------始终不变。
在实际开发中，坚持这种清晰的通信模式，不仅能减少 bug，还能显著提升团队协作效率。毕竟，当所有人都理解"状态从哪里来，到哪里去"时，代码就不再神秘，维护也就变得轻松。