easy-model 实战：跨组件通信、监听与异步加载，一库搞定 React 状态难题

在 React 开发中，状态管理往往是痛点：Redux 太重，Zustand 太轻，MobX 学习成本高。今天分享一个平衡的选择：easy-model，一个基于类模型的工具集。它不仅简化了状态管理，还内置 IoC 和监听能力。让我通过几个实战场景带大家看看它的威力。

场景1：跨组件通信（实例共享）

typescript 复制代码

import { useModel } from "easy-model";

class CommunicateModel {
  constructor(public name: string) {}
  value = 0;
  random() {
    this.value = Math.random();
  }
}

function CommunicateA() {
  const { value, random } = useModel(CommunicateModel, ["channel"]);
  return (
    <div>
      <span>组件 A：{value}</span>
      <button onClick={random}>改变数值</button>
    </div>
  );
}

function CommunicateB() {
  const { value } = useModel(CommunicateProvider, ["channel"]);
  return <div>组件 B：{value}</div>;
}

组件 A 改变数值，组件 B 立刻更新。天然支持「按业务 key 分区」状态。

场景2：精细化监听（watch 与 offWatch）

监听模型变化，跳过某些字段以优化性能：

typescript 复制代码

import { watch, offWatch } from "easy-model";

class WatchModel {
  constructor(public name: string) {}
  value = 0;
  @offWatch
  internalCounter = 0; // 跳过监听，提高性能

  increment() {
    this.value += 1;
    this.internalCounter += 1;
  }
}

const inst = provide(WatchModel)("demo");
const stop = watch(inst, (keys, prev, next) => {
  console.log(`${keys.join(".")}: ${prev} -> ${next}`);
});

inst.increment(); // 只输出 value 的变更
stop();

适合日志记录、外部同步等场景。

场景3：异步加载管理（loader 与 useLoader）

统一处理 loading 状态：

typescript 复制代码

import { loader, useLoader, useModel } from "easy-model";

class LoaderModel {
  constructor(public name: string) {}

  @loader.load(true)
  async fetch() {
    return new Promise<number>(resolve =>
      setTimeout(() => resolve(42), 1000)
    );
  }
}

function LoaderDemo() {
  const { isGlobalLoading, isLoading } = useLoader();
  const inst = useModel(LoaderModel, ["demo"]);

  return (
    <div>
      <div>全局加载：{String(isGlobalLoading)}</div>
      <div>当前方法加载：{String(isLoading(inst.fetch))}</div>
      <button onClick={() => inst.fetch()} disabled={isGlobalLoading}>
        加载数据
      </button>
    </div>
  );
}

适用场景

领域模型清晰的项目（用类承载业务）。
需要依赖注入的中大型应用（内置 IoC）。
对性能敏感的批量更新场景（benchmark 显示个位数毫秒）。

easy-model 让我在项目中少写了很多模板代码，心智负担低。感兴趣的同学可以去 GitHub 看看示例：github.com/ZYF93/easy-... 。

npm 安装：npm install @e7w/easy-model。

你用过哪些状态管理方案？觉得 easy-model 怎么样？评论区聊聊！