告别 Redux 的繁琐，试试这个基于类模型的 React 状态管理库：easy-model

张一凡932026-03-13 11:40

大家好，我是一名前端能工智人。最近在探索 React 状态管理的新方案时，写了一个很有趣的库：easy-model。它不是传统的 Redux/MobX/Zustand，而是围绕「类模型 + 依赖注入 + 精细化变更监听」构建的工具集。如果你厌倦了 action/reducer 的模板代码，或者想用更 OOP 的方式管理状态，这篇文章值得一看。

核心特性一览

类模型驱动：直接用 TypeScript 类描述业务逻辑，字段就是状态，方法就是业务逻辑。没有额外的 action 或 reducer。
实例缓存与共享：用 provide 包装类，按参数分组缓存实例，相同参数共享同一实例。
深层变更监听：支持监听模型字段、嵌套对象，甚至 getter 返回的衍生实例变化。
React Hooks 友好：提供 useModel、useInstance、useWatcher 等 Hooks，轻松集成到组件中。
IoC 与依赖注入：内置容器，支持用装饰器和 Zod schema 声明依赖，适合中大型项目。
异步加载管理：用 loader 装饰器标记异步方法，统一管理全局/单个方法的 loading 状态。

为什么值得试试？

相比 Redux 的不可变 state 和大量模板代码，easy-model 更接近自然编程：写类、写方法、用 Hooks 订阅。性能也不错，在批量更新场景下能保持个位数毫秒响应（项目里有 benchmark，对比了 Redux/MobX/Zustand）。

简单示例

假设你有一个计数器模型：

javascript 复制代码

import { useModel, useWatcher } from "easy-model";

class CounterModel {
  count = 0;
  label: string;
  constructor(initial = 0, label = "计数器") {
    this.count = initial;
    this.label = label;
  }
  increment() {
    this.count += 1;
  }
  decrement() {
    this.count -= 1;
  }
}

function Counter() {
  const counter = useModel(CounterModel, [0, "示例"]);

  useWatcher(counter, (keys, prev, next) => {
    console.log("changed:", keys.join("."), prev, "->", next);
  });

  return (
    <div>
      <h2>{counter.label}</h2>
      <div>{counter.count}</div>
      <button onClick={() => counter.decrement()}>-</button>
      <button onClick={() => counter.increment()}>+</button>
    </div>
  );
}

就这样，一个完整的状态管理组件就写好了！

项目链接

GitHub：github.com/ZYF93/easy-...
npm：www.npmjs.com/package/@e7...

如果你在做中大型 React 项目，或者对类模型感兴趣，不妨试试 easy-model。有什么问题或想法，欢迎在评论区讨论！