3. 状态提升的适用场景：跨兄弟组件共享、表单联动、视图同步

状态提升并非在所有场景下都是最佳方案。过度提升会导致祖组件承载过多无关状态，反而降低复用性与可维护性。本章聚焦三类强适用场景，从组件边界、层级分层、状态所有权、数据流方向四个维度剖析何时必须提升状态，以及如何进行复用权衡。

3.1 三类典型场景的组件边界与层级分层

在状态提升决策中，首先需划清组件边界——即哪些组件属于同一“状态域”。跨兄弟组件共享、表单联动、视图同步都发生在同一层级或相邻层级的组件之间，需要通过共同的父组件建立数据通路。

场景	组件边界特征	层级分层	状态所有权	数据流方向
跨兄弟组件共享	两个平级组件依赖同一份数据	提升到最近的共同祖先	父组件持有状态	自上而下（父→子），回调向上
表单联动	表单域之间相互影响（如选择国家→城市）	提升到表单容器组件	表单容器持有联动逻辑	双向：用户输入→父更新→子重渲染
视图同步	同一数据的多种展示视图（列表/图表/详情）	提升到视图管理组件	管理组件持有数据源	单向：数据变化→所有视图同步更新

3.2 跨兄弟组件共享：组件边界与状态所有权

当两个平级且无父子关系的组件需要访问同一份数据时，状态提升是必然选择。典型的组件边界划分规则：找到这两个组件的最近共同祖先，在该祖先上声明状态。

// 提升前：各自维护选中状态，导致数据不一致
function UserList() {
  const [selectedId, setSelectedId] = useState(null); // ❌ 冗余
  // ...
}

function UserDetail() {
  const [selectedId, setSelectedId] = useState(null); // ❌ 无法与列表同步
  // ...
}

// 提升后：父组件统一持有
function UserDashboard() {
  const [selectedId, setSelectedId] = useState(null); // ✅ 单一状态源
  
  return (
    <div>
      <UserList selectedId={selectedId} onSelect={setSelectedId} />
      <UserDetail selectedId={selectedId} />
    </div>
  );
}

3.3 表单联动：层级分层与数据流方向

表单联动是指两个或多个表单控件之间存在级联依赖关系。例如：选择国家后，城市下拉框自动过滤可选项。这种场景下的状态提升必须考虑数据流方向——联动逻辑应放在表单容器层级，子组件仅负责渲染与触发事件。

// 表单容器组件 - 持有联动状态
function LocationForm() {
  const [country, setCountry] = useState('');
  const [cityList, setCityList] = useState([]);
  
  // 联动逻辑：国家变化 → 更新城市列表
  useEffect(() => {
    if (country) {
      fetchCitiesByCountry(country).then(setCityList);
    }
  }, [country]);
  
  return (
    <form>
      <CountrySelect value={country} onChange={setCountry} />
      <CitySelect options={cityList} />
    </form>
  );
}

// CountrySelect 仅负责展示与事件通知
function CountrySelect({ value, onChange }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)}>
      <option value="">请选择国家</option>
      <option value="CN">中国</option>
    </select>
  );
}

3.4 视图同步：复用权衡与验收标准

当同一份数据需要以多种形式展示（列表、统计图、卡片）时，视图同步场景对状态提升提出了复用权衡要求。需要平衡“数据单源”和“组件独立演化”之间的关系。

维度	提升方案	不提升方案
数据一致性	✅ 一致（单源）	❌ 可能不同步
组件复用性	✅ 可独立使用（接收props即可）	⚠️ 可能绑定特定数据
父组件复杂度	⚠️ 增加负担	✅ 保持轻盈
适用场景	实时数据仪表盘、协同编辑	独立卡片、静态快照

3.5 重构落地步骤与验收标准

针对上述三类场景，状态提升的重构落地步骤遵循统一模式：

1. 识别状态域：找出跨组件共享的数据项
2. 定位共同祖先：确定需要提升到哪一层级
3. 迁移状态声明：将 useState 和联动逻辑移至祖先组件
4. 传递props：向下传递数据，向上传递回调
5. 清理冗余：删除子组件中不再需要的状态声明