4. 状态提升的基本实现：父组件 state + props 传递 + 回调更新

4.1 原理与动机

在 React 中，当多个子组件需要共享同一份数据，且数据的变更需要同时反映在所有关联组件中时，必须将这份数据提升到它们最近的公共父组件中。父组件通过 state 持有数据，通过 props 向下分发给子组件，并通过回调函数让子组件能够触发父组件 state 的更新。这一模式称为“状态提升”（State Hoisting）。

核心原则：单一数据源——避免同一数据在不同组件中重复存储，防止数据不一致。

4.2 实现流程

1. 识别共享状态：找出需要在多个子组件间同步的数据。
2. 将状态移至父组件：如果数据原本在某个子组件内，将其 state 上移到公共父组件中。
3. 通过 props 传递：父组件将状态值作为 props 传递给所有需要该数据的子组件。
4. 传递回调函数：父组件定义更新 state 的函数，通过 props 传递给需要修改数据的子组件。
5. 子组件触发更新：子组件在适当事件（如 onChange、onClick）中调用回调函数，父组件 setState 后重新渲染所有子组件。

4.3 代码实现（函数组件）

// 父组件 TemperatureCalculator
import React, { useState } from 'react';

function TemperatureCalculator() {
  const [temperature, setTemperature] = useState(0);
  const [unit, setUnit] = useState('celsius');

  const handleCelsiusChange = (value) => {
    setTemperature(value);
    setUnit('celsius');
  };

  const handleFahrenheitChange = (value) => {
    setTemperature(value);
    setUnit('fahrenheit');
  };

  const toCelsius = (f) => ((f - 32) * 5) / 9;
  const toFahrenheit = (c) => (c * 9) / 5 + 32;

  const currentCelsius = unit === 'fahrenheit' ? toCelsius(temperature) : temperature;
  const currentFahrenheit = unit === 'celsius' ? toFahrenheit(temperature) : temperature;

  return (
    <div>
      <TemperatureInput
        scale="celsius"
        value={currentCelsius}
        onValueChange={handleCelsiusChange}
      />
      <TemperatureInput
        scale="fahrenheit"
        value={currentFahrenheit}
        onValueChange={handleFahrenheitChange}
      />
    </div>
  );
}

// 子组件 TemperatureInput
function TemperatureInput({ scale, value, onValueChange }) {
  const label = scale === 'celsius' ? '摄氏 (°C)' : '华氏 (°F)';
  return (
    <fieldset>
      <legend>请输入 {label}</legend>
      <input
        value={value}
        onChange={(e) => onValueChange(e.target.value)}
      />
    </fieldset>
  );
}

4.4 调试与验证

• 使用 React DevTools 查看父组件 state 的变化，以及两个子组件收到的 props 是否同步更新。
• 在任一子组件中输入数值，观察另一子组件的值是否自动转换并显示。
• 检查 prop 传递链路：确保子组件没有直接修改 props，所有变更均通过回调回到父组件。

4.5 部署注意事项

状态提升本身对部署无特殊要求。生产环境构建时，需确保回调函数不因频繁创建导致子组件不必要的重渲染。建议在回调传递处使用 useCallback（函数组件）或类组件中将回调定义为方法，以减少子组件不必要的 re-render。

4.6 常见错误与避坑

4.7 性能与稳定性优化

• 使用 React.memo：对不依赖更新数据的子组件做浅比较，避免父组件重渲染时连带所有子组件重新渲染。
• 稳定回调引用：在函数组件中用 useCallback 包装回调函数，保证子组件 memo 生效。
• 避免不必要的状态拆分：将互相依赖的状态合并到一个 useState 或 useReducer 中，减少因部分更新导致的连锁渲染。
• 惰性初始化：如果初始状态需要计算，使用 useState(() => compute()) 避免每次渲染重复计算。

4.8 状态提升流程示意图