大家好，我是一名前端能工智人。最近在探索 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）。
简单示例
假设你有一个计数器模型：
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>
);
}
就这样，一个完整的状态管理组件就写好了！
项目链接
如果你在做中大型 React 项目，或者对类模型感兴趣，不妨试试 easy-model。有什么问题或想法，欢迎在评论区讨论！
