easy-model 上手指南

如果你之前用 Redux / MobX / Zustand 做过状态管理，那么上手 easy-model 的过程会很短。它不要求你改变 React 习惯，只是把“状态容器”的心智迁移成“业务模型”。

第一步：安装

pnpm add @e7w/easy-model

第二步：写一个模型类

class TodoModel {
  items: string[] = [];
  add(text: string) {
    this.items.push(text);
  }
  remove(index: number) {
    this.items.splice(index, 1);
  }
}

第三步：在组件中创建并订阅

import { useModel } from "easy-model";

function TodoList() {
  const todo = useModel(TodoModel, []);
  return (
    <div>
      <button onClick={() => todo.add("new item")}>Add</button>
      <ul>
        {todo.items.map((it, i) => (
          <li key={i} onClick={() => todo.remove(i)}>
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
}

这就是 easy-model 的核心体验：

• 模型就是业务
• 状态附着在模型上
• 实例按参数自然分区
• 依赖和监听都是内建能力

如果你正在考虑从“状态容器”转向“模型范式”，建议直接写一个业务模型试试，感受会非常直观。

GitHub: easy-model

npm: @e7w/easy-model