3. State Hoisting 与权限逻辑分离：权限状态提升至共享父组件

3.1 架构问题：权限与 UI 的过度耦合

在传统 React/Vue 组件设计中，权限判断常散落在各个业务组件内部。每个需要权限控制的组件直接请求用户角色或权限列表，导致两个核心问题：

• 模块边界模糊：UI 组件同时承担数据获取、逻辑判断和渲染职责，超出单一职责边界。
• 信任链路断裂：权限校验分散在多个孤立节点，无法形成统一的信任策略。

3.2 方案核心：状态提升与逻辑下沉

将权限状态从具体的 UI 组件中 提升 至最近的共享父组件，由父组件统一管理权限数据流。子组件仅通过 props 接收已处理好的权限标识，不再关心权限来源和校验逻辑。

// 共享父组件：统一承载权限状态
function ParentPage() {
  const [userPermissions] = usePermissions(); // 权限状态提升至此

  return (
    <div>
      <ProfilePanel canEdit={userPermissions.includes('profile:edit')} />
      <AdminDashboard isAdmin={userPermissions.includes('admin:access')} />
    </div>
  );
}

// 子组件：仅通过 props 接收权限标识，无需内部校验
function ProfilePanel({ canEdit }) {
  return (
    <form>
      <input name="nickname" />
      {canEdit && <button type="submit">保存</button>}
    </form>
  );
}

3.3 架构分层与模块边界

引入状态提升后，系统形成三层结构：

3.4 数据流 / 控制流 / 信任链路

该架构重新定义了数据与控制的流动方向：

• 数据流：权限数据从状态层 → 父组件 → 子组件 (单向下行)。
• 控制流：权限变更由父组件的回调函数下放给子组件，子组件调用时父组件重新校验。
• 信任链路：权限断言集中在父组件，审计点唯一，降低信任链断裂风险。

3.5 选型权衡

3.6 风险点与应对策略

• Props 透传爆炸：当子组件深度超过 2 层时，显式传递 props 易导致中间组件无意义转发。使用组合模式或上下文按需注入。
• 权限状态滞后：父组件更新权限后，子组件可能因为 shouldComponentUpdate 阻止重渲染。使用纯组件或不可变数据强制更新。
• 类型系统负担：每个子组件需定义接收集合。使用 TypeScript 联合类型约束可能接受的权限标识。

3.7 落地步骤

1. 分析当前组件树，找出所有内部包含权限校验的 UI 组件。
2. 为每组共性的权限校验找到最近的共享父组件。
3. 在父组件引入权限状态，并创建映射函数：perm → boolean
4. 移除子组件内部权限逻辑，通过 props 接收已映射的权限标识。
5. 为子组件添加 PropTypes 或 TypeScript 接口约束 props。
6. 编写回归测试：覆盖所有权限条件下的 UI 分支。

3.8 验收标准