⚛️ 状态提升与单向数据流 Lifting State Up

🔺 为什么需要状态提升

在 React 或类似组件化架构中，多个子组件需要共享同一份数据 时，如果每个子组件各自维护状态，会导致数据不一致、难以同步。状态提升正是为了解决这种 “兄弟组件通信困局”。

• 避免状态冗余 — 同一数据在多个地方重复定义，容易产生不一致。
• 简化数据流 — 数据自上而下流动，调试时能清晰追踪变化来源。
• 提升可维护性 — 状态集中管理，修改逻辑只在一处生效。
• 单向数据流合规 — 保证数据从父级流向子级，子级通过回调反馈。

🧠 核心思想：单一可信来源

状态提升的核心思想是：将共享状态移动到最近的共同父组件中，父组件通过 props 将数据下发给子组件，子组件通过回调函数（如 onChange）向上传递修改请求。

父组件持有状态 value，通过 props 传给 A 和 B；A 或 B 触发事件时调用父级提供的 onValueChange 回调，父组件更新状态并重新渲染。

🧩 共享状态的设计模式

状态提升不仅仅是一种技巧，更是一组可复用的设计模式。下面列出三种常用模式，并给出典型代码结构。

模式	说明	适用场景
📌 容器/展示模式	父容器管理状态，子组件只负责渲染和触发回调	列表、卡片、仪表盘
📌 受控组件模式	表单元素的值由父组件通过 props 控制，变更通过回调	输入框、选择器、滑动条
📌 提升-下沉模式	状态提升到父级，但部分局部状态仍保留在子组件	折叠面板、步骤条

📁 代码示例：温度转换器 (状态提升经典)

// 父组件：Calculator (状态提升)
function Calculator() {
  const [temperature, setTemperature] = useState('');

  const handleChange = (value) => {
    setTemperature(value);
  };

  return (
    <div>
      <TemperatureInput
        scale="c"
        value={temperature}
        onChange={handleChange} />
      <TemperatureInput
        scale="f"
        value={temperature}
        onChange={handleChange} />
      <BoilingVerdict celsius={parseFloat(temperature)} />
    </div>
  );
}

// 子组件：TemperatureInput (受控)
function TemperatureInput({ scale, value, onChange }) {
  const scaleName = scale === 'c' ? '摄氏度' : '华氏度';
  return (
    <fieldset>
      <legend>输入{scaleName}：</legend>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)} />
    </fieldset>
  );
}

✅ 状态 temperature 只存在于父组件 Calculator 中，两个子组件通过 props 获取并修改同一数据，保证同步。

📋 设计模式对比速览

• 单向数据流 — 数据从父到子，动作从子到父（回调）。
• 状态提升 — 兄弟组件共享状态时，提升到最近公共父节点。
• 状态下沉 — 当某些状态不需要共享时，保留在子组件内部。
• 组合 vs 继承 — 推荐组合模式，通过 children 或 render props 共享。

“提升状态，降低耦合 —— 让数据流像山泉一样清澈。”