UmiJS 中 useModel 的隐式调用问题与解决方案

问题背景

在使用 UmiJS 框架开发时，开发者可能会遇到一个常见问题：在 models 目录下定义的模型，即使没有显式调用 useModel，其中的代码也会自动执行。这会导致一些不必要的副作用，特别是当模型包含需要特定条件才能执行的请求时（例如需要用户登录后才能发起的请求）。

问题本质

UmiJS 中的 model 设计遵循全局状态管理理念，具有以下核心特性：

1. 持久化：模型在整个应用生命周期中都保持活跃状态
2. 全局性：模型状态可以在应用的任何地方被访问和共享
3. 自动初始化：应用启动时就会初始化所有定义的模型

这种设计意味着模型中的代码（包括请求逻辑）会在应用初始化阶段自动执行，而不需要显式调用 useModel。

解决方案

针对这种隐式调用问题，开发者可以考虑以下几种解决方案：

1. 使用 React Context 实现局部状态

对于只需要在特定组件树中共享的状态，可以使用 React 内置的 Context API 来创建局部状态管理方案。这种方式可以确保状态只在需要的地方初始化和使用。

2. 控制副作用执行时机

在模型设计中避免使用立即执行的副作用（如 useEffect 的默认行为），改为在特定条件满足后手动触发初始化逻辑。例如：

export default function handlingOptions() {
  const [initialized, setInitialized] = useState(false);
  const { data = [] } = useRequest(() => {
    if (!initialized) return Promise.resolve([]);
    return APIS.chuliyijianzidianbiao.listDictionaryByParamUsingPost();
  });

  const init = () => setInitialized(true);

  return {
    all: data.filter(...).map(...),
    init
  };
}

3. 使用现代状态管理方案

UmiJS 支持多种现代状态管理库，这些方案通常提供更灵活的状态管理方式：

• Jotai：原子化状态管理，适合细粒度状态控制
• Valtio：基于代理的响应式状态管理
• Zustand：轻量级状态管理方案，结合了 Redux 和 Hooks 的优点

4. 专门的请求状态管理

对于请求相关的状态，可以考虑使用专门的请求状态管理方案：

• React Query：强大的数据同步和缓存管理
• SWR：轻量级数据请求库，支持缓存和重新验证

最佳实践建议

1. 明确状态作用范围：全局状态使用 model，局部状态使用 Context
2. 延迟初始化：对于有条件要求的逻辑，实现手动初始化机制
3. 合理选择工具：根据项目规模和复杂度选择合适的状态管理方案
4. 关注性能：避免不必要的全局状态初始化，特别是包含网络请求的情况

通过理解 UmiJS 模型的设计理念和掌握这些解决方案，开发者可以更灵活地控制应用状态的初始化和使用时机，避免不必要的副作用和性能损耗。