如何合规创建包装Hook扩展所有Store实体？规避Hooks规则问题

我有一个Hook，用于从状态仓库加载实体，并提供更新、删除方法来修改该实体：

// 从store加载实体并提供更新和删除方法
const useEntity = (entityId) => {
  // 从store中选择实体
  const entity = useSelector(selectEntity(entityId));

  // 更新store中的实体
  const update = (value) => {
    // ...逻辑
  };

  // 从store中删除实体
  const remove = () => {
    // ...逻辑
  };
  
  return {
    entity, // 来自store的实体
    update, // 更新方法
    remove  // 删除方法
  };
};

我想编写一个「包装」Hook，通过上述useEntity扩展仓库中的所有实体，于是写了如下代码：

// 使用之前定义的useEntity Hook扩展store中的所有实体
const useEntities = () => {
  // 选择store中的所有实体
  const allEntities = useSelector(selectAllEntities);
  const extendedEntities = allEntities.map((entity) => useEntity(entity.id));
  return extendedEntities;
}

显然这段代码违反了Hook规则——在循环中调用了Hook。

我需要知道，给所有实体添加自定义方法的正确实现方式是什么？理想的使用方式如下：

const extendedEntities = useEntities()
extendedEntities[0].update("New value") // 更新实体0的值
extendedEntities[6].remove() // 删除实体6
extendedEntities[3].entity // 返回实体3的值
// ...等等

核心思路是不在循环内调用Hook，而是先获取所有实体数据，再手动将更新、删除方法绑定到每个实体上——这些方法无需依赖Hook调用，仅需状态仓库的调度器（如Redux的dispatch）和实体ID即可实现。

基础实现方案 #

const useEntities = () => {
  const allEntities = useSelector(selectAllEntities);
  const dispatch = useDispatch(); // 适配Redux，可根据实际状态管理工具调整

  // 通用更新方法
  const updateEntity = (entityId, value) => {
    // 复用原useEntity中update的逻辑，比如dispatch对应action
    dispatch(updateAction(entityId, value));
  };

  // 通用删除方法
  const removeEntity = (entityId) => {
    // 复用原useEntity中remove的逻辑
    dispatch(removeAction(entityId));
  };

  // 为每个实体绑定专属方法
  return allEntities.map(entity => ({
    entity,
    update: (value) => updateEntity(entity.id, value),
    remove: () => removeEntity(entity.id)
  }));
};

这种实现的优势：

• 完全符合Hook规则，所有Hook调用均在函数顶层
• 扩展后的实体可直接调用update/remove方法，完全匹配预期的使用方式
• 避免了重复调用useEntity带来的性能损耗与规则冲突

进阶复用方案 #

如果useEntity中还有其他依赖Hook的逻辑（如实体变化订阅），可将代码拆分为纯逻辑层与Hook层，提升复用性：

1. 先编写纯工具函数，封装实体操作逻辑：

// 纯工具函数，不依赖任何Hook
const createEntityActions = (dispatch, entityId) => ({
  update: (value) => dispatch(updateAction(entityId, value)),
  remove: () => dispatch(removeAction(entityId))
});

2. 改造原useEntity，复用工具函数：

const useEntity = (entityId) => {
  const entity = useSelector(selectEntity(entityId));
  const dispatch = useDispatch();
  const actions = createEntityActions(dispatch, entityId);
  
  return { entity, ...actions };
};

3. 最终useEntities同样复用工具函数：

const useEntities = () => {
  const allEntities = useSelector(selectAllEntities);
  const dispatch = useDispatch();
  
  return allEntities.map(entity => ({
    entity,
    ...createEntityActions(dispatch, entity.id)
  }));
};

这种拆分方式既保证了代码复用，又严格遵守Hook调用规则。

内容的提问来源于stack exchange，提问作者Michael Seltenreich