第2章 状态提升实战：从子组件内聚状态到父组件提升

2.1 为什么需要状态提升？

在React中，多个子组件需要共享同一份数据时，将状态保留在某个子组件内部会导致数据孤岛，兄弟组件无法直接访问。状态提升（Lifting State Up）将共享状态移动到最近的共同父组件，通过 props 向下分发，并通过回调函数向上传递变更请求。这种模式让数据流变成单一方向，降低组件耦合，提升可维护性。

2.2 内聚状态 vs 提升状态：业务场景对比

以“温度转换器”为例：两个子组件分别输入摄氏度和华氏度，需要保持数值同步。

2.3 重构三步流程

1. 识别共享数据： 找出哪些状态需要在子组件间同步。
2. 将状态上移： 在父组件中创建 useState，并移除子组件内部的状态声明。
3. 通过 props 和回调连接： 父组件将当前值通过 value 传入子组件，子组件通过 onChange 回调将用户输入传回父组件。

2.4 代码重构示例（React + TypeScript）

重构前（内聚状态，两个子组件各自独立）：

// TemperatureInput.tsx（内聚状态）
import { useState } from 'react';

function TemperatureInput({ scale }: { scale: 'c' | 'f' }) {
  const [temperature, setTemperature] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTemperature(e.target.value);
  };

  return (
    <fieldset>
      <legend>请输入温度（{scale === 'c' ? '摄氏度' : '华氏度'}）</legend>
      <input value={temperature} onChange={handleChange} />
    </fieldset>
  );
}

重构后（状态提升到父组件 Calculator）：

// TemperatureInput.tsx（受控组件，接收 value 和 onChange）
function TemperatureInput({ scale, value, onChange }: {
  scale: 'c' | 'f';
  value: string;
  onChange: (value: string) => void;
}) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  };

  return (
    <fieldset>
      <legend>请输入温度（{scale === 'c' ? '摄氏度' : '华氏度'}）</legend>
      <input value={value} onChange={handleChange} />
    </fieldset>
  );
}

// Calculator.tsx（父组件管理共享状态）
import { useState } from 'react';
import TemperatureInput from './TemperatureInput';

function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState<'c' | 'f'>('c');

  const handleCelsiusChange = (value: string) => {
    setScale('c');
    setTemperature(value);
  };

  const handleFahrenheitChange = (value: string) => {
    setScale('f');
    setTemperature(value);
  };

  // 转换逻辑……
  const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput scale="c" value={celsius} onChange={handleCelsiusChange} />
      <TemperatureInput scale="f" value={fahrenheit} onChange={handleFahrenheitChange} />
    </div>
  );
}

2.5 数据流示意图

2.6 关键 API 与类型说明

2.7 常见错误及调试

• 错误：忘记传递回调，子组件尝试直接修改 props。
  React 会报 warning，状态不更新。解决：父组件确保传入 onChange，子组件调用 onChange(e.target.value)。
• 错误：子组件内部仍保留自己的 useState，导致内外状态不同步。
  调试时发现输入框显示值和父组件存储值不一致。解决：完全删除子组件内的 useState，只保留 props 和回调。
• 错误：在回调中直接修改原始状态（可变更新）。
  例如 onChange(temperature + e.target.value) 而非 onChange(e.target.value)。React 状态不可直接修改，需通过 setter 替换。

2.8 性能与稳定性优化

• 避免不必要的重渲染： 当父组件状态变化时，所有子组件都会重新渲染。如果子组件有昂贵计算，使用 React.memo 包裹子组件，配合 useCallback 稳定回调引用。
• 回调函数 useCallback： 将 handleCelsiusChange 等函数用 useCallback 包裹，避免每次渲染生成新函数导致子组件重新渲染（即使子组件用了 React.memo）。

// 父组件中优化回调
const handleCelsiusChange = useCallback((value: string) => {
  setScale('c');
  setTemperature(value);
}, []);

const handleFahrenheitChange = useCallback((value: string) => {
  setScale('f');
  setTemperature(value);
}, []);

• 状态碎片化： 如果共享状态过多，考虑使用 useReducer 替代多个 useState，使状态更新逻辑集中化，减少 props 透传数量。

2.9 部署检查清单

• 所有子组件内部不再拥有独立状态变量（与提升的状态冲突）。
• 父组件传递给子组件的 value 与子组件中显式的 input value 一致。
• 子组件的 onChange 回调名称与父组件传入的 prop 名称匹配。
• 类型定义完整（TypeScript 下确保 value 和 onChange 类型正确）。