1. 状态提升的核心概念与 React 单向数据流

1.1 React 单向数据流原理

React 采用单向数据流（Unidirectional Data Flow）作为其核心数据传递机制。数据从父组件通过 props 向下传递到子组件，形成清晰的层级传递链。子组件不能直接修改父组件传递的数据，只能通过父组件提供的回调函数来通知父组件更新状态。

这种设计保证了数据流向的可预测性和可追踪性，便于定位 bug 和理解组件间的数据依赖关系。

1.2 单向数据流的传递模型

1.3 状态提升场景

当多个子组件需要共享同一份数据，或某个子组件的行为会影响其他兄弟组件时，就需要将共享状态提升到它们最近的共同父组件中管理。常见的状态提升场景包括：

• 表单联动：多个输入框共享校验状态或值依赖关系。
• 列表项选择：父组件维护选中项 ID，子组件仅负责展示和点击上报。
• 全局筛选器：筛选条件在父组件中统一管理，多个子组件根据筛选条件渲染不同数据。
• 步骤条/向导：当前步骤由父组件控制，子组件对步骤切换仅触发事件回调。

1.4 父组件统一管理状态的实现流程

1. 确定共享状态：分析哪些数据需要被多个子组件读取或修改。
2. 定位共同父组件：找到所有使用该状态组件的最近公共父组件。
3. 在父组件中声明状态：使用 useState 或 useReducer 管理该状态。
4. 通过 props 向下传递：将状态值和修改函数作为 props 传递给子组件。
5. 子组件通过回调上报：子组件在需要修改状态时调用父组件传入的回调函数。

1.5 状态提升前后对比

1.6 状态提升与单向数据流结构

下面用内联 SVG 表示 React 单向数据流与状态提升的协作关系：

1.7 常见错误与避坑指南

// ❌ 错误做法：子组件用 props 初始化本地状态
function Child({ count }) {
  const [localCount, setLocalCount] = useState(count); // count 更新后 localCount 不会跟随更新
  return 
{localCount}
;
}

// ✅ 正确做法：直接使用 props
function Child({ count, onIncrement }) {
  return 
{count}
;
}

1.8 性能与稳定性提示

• 避免过度提升：只有多个组件需要共享时才提升状态，否则保持状态在需要它的最低层级组件中，减少不必要的重新渲染。
• 使用 React.memo：对于接收 props 较多且渲染成本高的子组件，结合状态提升使用 React.memo 避免因父组件其它状态变更引发的无关子组件重渲染。
• 回调函数稳定引用：使用 useCallback 包裹传递给子组件的回调函数，防止每次父组件渲染时都生成新函数导致子组件不必要的更新。