🧩 状态提升 · 单向数据流

📌 状态提升 Lifting State Up

将多个子组件中共享的状态移动到它们最近的共同父组件中，由父组件统一管理，再通过 props 向下分发。这是 React 单向数据流的核心实践。

• 组件树分层清晰
• 父子通信：props + 回调
• 兄弟共享：父组件中转
• 数据流可预测

🌳 组件树 & 通信方式

💡 状态提升让兄弟组件通过父级“间接对话”，保持数据单向流动。

🧬 状态提升架构 单向数据流

⬆️ 父组件持有状态，通过 props 向下派发，子组件通过回调向上“通知”

📄 代码 · 兄弟组件共享温度

两个输入框（摄氏/华氏）同步同一个温度值，状态提升至 Calculator 父组件。

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

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

  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={temperature}
        onTemperatureChange={handleChange} />
      <TemperatureInput
        scale="f"
        temperature={temperature}
        onTemperatureChange={handleChange} />
    </div>
  );
}

// 子组件：受控组件，通过 props 接收状态和回调
function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  const scaleName = scale === 'c' ? '摄氏' : '华氏';
  return (
    <fieldset>
      <legend>{scaleName}温度</legend>
      <input
        value={temperature}
        onChange={(e) => onTemperatureChange(e.target.value)} />
    </fieldset>
  );
}

✅ 状态只存在于父组件，子组件通过 props 读取，通过回调修改。

➡️ 单向数据流三原则

• 状态唯一来源 — 每个共享状态由某个父组件“拥有”
• 数据向下流动 — 通过 props 从父到子传递
• 变更向上传递 — 子组件通过调用父组件提供的回调来请求修改

🔁 这样数据流形成一个清晰的闭环，调试如同“顺着管道查找”。