React 的单向数据流（Unidirectional Data Flow）是其核心设计原则之一，它规定了数据在组件之间传递的方向和方式。这一机制使得应用的状态更可预测、调试更容易，并有助于构建大型、可维护的前端应用。
一、什么是单向数据流？
单向数据流指的是：
数据从父组件流向子组件，不能反向流动。子组件不能直接修改从父组件接收到的 props，只能通过回调函数通知父组件进行状态更新。
这种数据流动方向是自上而下（top-down）或从父到子（parent-to-child）的。
二、核心机制
1. Props 传递（父 → 子）
- 父组件通过 props 将数据传递给子组件。
- 子组件接收 props 并用于渲染 UI。
- props 是只读的（read-only），子组件不能修改它们。
2. 回调函数（子 → 父通信）
- 如果子组件需要“改变”数据，必须通过父组件传入的回调函数触发。
- 父组件在自己的状态中更新数据，然后重新渲染，将新值通过 props 传给子组件。
这样，数据流始终是： 用户交互 → 子组件调用回调 → 父组件更新 state → 重新渲染 → 新 props 传给子组件
三、为什么使用单向数据流？
| 优点 | 说明 |
|---|---|
| 可预测性 | 数据变化路径清晰，便于追踪 bug |
| 组件解耦 | 子组件不关心数据如何变化，只负责展示 |
| 易于测试 | 组件输入（props）明确，输出（UI）确定 |
| 避免副作用 | 防止子组件意外修改共享状态 |
四、与双向数据绑定对比
- Angular / Vue（早期） 使用双向绑定（如
v-model或[(ngModel)]），允许视图和模型自动同步。 - React 明确拒绝双向绑定，认为它隐藏了数据流动，导致难以维护。
React 的哲学：“显式优于隐式”。
五、在状态管理中的体现
即使使用 Redux、Zustand 或 Context API，React 依然保持单向数据流：
- 状态存储在顶层（store / context provider）
- 组件通过 props 或 hooks 读取状态
- 通过 dispatch / setter 更新状态
- 状态变更后，React 重新渲染相关组件
总结
React 的单向数据流是一种自上而下、只读 props + 回调更新的数据管理范式。它强调：
- 数据来源单一（Single Source of Truth）
- 状态变更路径清晰
- 组件职责分明
这种设计虽然初期看起来“啰嗦”，但在复杂应用中能极大提升可维护性和可调试性，是 React 架构稳健性的基石。
