2. 状态提升的适用场景：兄弟组件通信、表单联动、公共数据依赖

状态提升（Lifting State Up）本质上是将多个子组件需要共享的状态，提升到它们最近的共同父级组件中管理，再通过 props 向下分发。这种模式不是为了「提升」而提升，而是为了解决特定场景下的数据同步问题。本章将剖析最常见、最典型的三个适用场景：兄弟组件通信、表单联动、公共数据依赖，并给出可落地的实现流程与优化指南。

2.1 场景一：兄弟组件通信

问题背景：React 兄弟组件之间没有直接通信的通道，如果将状态放在各自组件内部，当 A 组件发生变化需要通知 B 组件更新时，必须通过父组件中转。

2.1.1 原理与实现流程

1. 识别共享状态：找出兄弟组件间需要同步的变量（如选中项、输入值、开关状态）。
2. 提升至父组件：将该状态声明在最近的共同父组件中，使用 useState 管理。
3. 向下传递：通过 props 将状态和更新函数分别传给兄弟组件。
4. 触发变更：A 组件调用父组件传来的更新函数，父组件重新渲染，B 组件通过 props 获取最新值。

2.1.2 代码示例

// 父组件：Parent.jsx
function Parent() {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div>
      <List onSelect={setSelectedId} />
      <Detail id={selectedId} />
    </div>
  );
}

// 兄弟组件 A：List.jsx
function List({ onSelect }) {
  const items = ['A', 'B', 'C'];
  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={() => onSelect(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

// 兄弟组件 B：Detail.jsx
function Detail({ id }) {
  return <p>当前选中: {id || '无'}</p>;
}

2.1.3 常见错误与优化

• ❌ 直接修改 props：兄弟组件不可直接调用 setSelectedId，必须经由父组件提供的回调。
• ❌ 过度提升：如果两个兄弟组件仅在父组件中短暂共存，且其中一个不关心状态变化，则不必提升。
• ✅ 性能优化：使用 useCallback 包裹传递给子组件的回调函数，避免不必要的重渲染。

2.2 场景二：表单联动

问题背景：表单中的多个输入控件（如选择城市后自动填充区县、输入金额后自动计算税费）需要相互依赖更新。

2.2.1 原理与实现流程

1. 统一状态源：将所有联动字段的状态提升到表单父组件中，用单个对象管理。
2. 计算派生状态：联动规则在父组件中通过 useMemo 或普通函数计算出依赖结果，再通过 props 下发。
3. 双向绑定：每个输入控件接收 value 和 onChange，onChange 执行父组件传递的更新函数。

2.2.2 代码示例（城市-区县联动）

// 父组件：CityForm.jsx
function CityForm() {
  const [province, setProvince] = useState('');
  const [city, setCity] = useState('');
  const cities = useMemo(() => getCitiesByProvince(province), [province]);

  return (
    <div>
      <ProvinceSelect value={province} onChange={setProvince} />
      <CitySelect cities={cities} value={city} onChange={setCity} />
    </div>
  );
}

// 子组件：ProvinceSelect.jsx
function ProvinceSelect({ value, onChange }) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)}>
      <option value="">请选择省份</option>
      <option value="GD">广东</option>
      <option value="BJ">北京</option>
    </select>
  );
}

// 子组件：CitySelect.jsx
function CitySelect({ cities, value, onChange }) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)} disabled={cities.length === 0}>
      {cities.map(c => (
        <option key={c} value={c}>{c}</option>
      ))}
    </select>
  );
}

2.2.3 常见错误与优化

• ❌ 在每个子组件内部另存副本：导致状态不一致，应以提升后的状态为准。
• ✅ 合并状态对象：使用 useReducer 管理复杂表单，比多个 useState 更易维护。
• ✅ 防抖与懒计算：对于输入频繁的高性能敏感场景，可用 useDeferredValue 延迟非紧急联动更新。

2.3 场景三：公共数据依赖

问题背景：多个组件需要渲染同一份从外部获取的数据（如用户信息、配置常量、实时数据订阅），且数据只应有一个加载入口和缓存。

2.3.1 原理与实现流程

1. 数据获取提升：在父组件（或通过自定义 hook）执行一次 fetch / useQuery。
2. 数据向下分派：通过 props 将原始数据、加载状态、错误信息传递给所有子组件。
3. 避免重复请求：同一份数据只请求一次，子组件只消费不重复请求。

2.3.2 代码示例（用户信息共享）

// 父组件：Dashboard.jsx
function Dashboard() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => { setUser(data); setLoading(false); });
  }, []);

  if (loading) return <Spinner />;
  return (
    <div>
      <UserProfile user={user} />
      <OrderHistory user={user} />
      <Notifications user={user} />
    </div>
  );
}

2.3.3 常见错误与优化

• ❌ 分别在子组件中发起相同请求：造成网络浪费和状态不同步。
• ✅ 结合 Context 或状态管理库：当公共数据树很深时，避免逐层传递 props，可配合 React.createContext + useContext。
• ✅ 使用 Suspense 与错误边界：提升后的数据加载可配合 <Suspense> 实现优雅降级。

2.4 三种场景对比

2.5 状态提升数据流全景图