React 缺失的“M”层：我开发了 Zenith，重塑完整的 Model

迷失的 Model

我们在谈论 React 时常说 UI = f(State)。React 完美地解决了 View （视图） 层，但对于 Model （数据模型） 层，社区的探索从未停止。

从 Redux 到 Hooks ，再到 Zustand ，我们越来越追求“原子化”和“碎片化”。这带来了极简的 API ，但也带来了一个严重的副作用：Model （模型）的破碎。

你是否遇到过这种情况：

• 数据 (State) 定义在一个 create 函数里。
• 计算 (Computed) 散落在组件的 useMemo 或各种 Selector 函数里。
• 行为 (Action) 散落在 useEffect 或各个 Event Handler 里。

“Model” 消失了，取而代之的是散落在各处的逻辑碎片。

Zenith：重塑 Model 层

Zenith 注重于高内聚（ Co-location ） 的开发体验，可以把数据 (State) 、计算 (Computed) 和 行为 (Action) 紧紧地封装在一起。

Zenith = Zustand 的极简 + MobX 的组织力 + Immer 的不可变基石

核心特性：“诚实”的 Model

1. 完整的模型定义 (Co-location)

在 Zenith 中，你不需要在闭包里用 get() 去“偷窥”状态，也不用担心 set 的黑盒逻辑。一个 Store 就是一个完整的、逻辑自洽的业务单元。

class TodoStore extends ZenithStore<State> { // 1. 数据 (State) constructor() { super({ todos: [], filter: 'all' }); } // 2. 自动计算属性 (Computed) // 告别手动写 Selector ，告别 useMemo // 像定义原生 getter 一样定义派生状态 @memo((s) => [s.state.todos, s.state.filter]) get filteredTodos() { const { todos, filter } = this.state; // ...逻辑 } // 3. 行为 (Action) // 诚实地使用 this ，UI 层绝不能直接碰 State addTodo(text: string) { this.produce((draft) => { draft.todos.push({ text, completed: false }); }); } } 

2. 链式派生：自动化的数据流

MobX 最让人着迷的是它的自动响应能力。Zenith 完美复刻了这一点，但底层依然是 Immutable Data。

你可以基于一个计算属性，派生出另一个计算属性（ A -> B -> C ）。当 A 变化时，C 会自动更新。我们不再需要手动维护依赖链，也不需要在组件里写一堆 useMemo，一切计算逻辑都收敛在 Model 内部。

3. 组件即视图 (View)：像 Zustand 一样简单

定义 Model 虽然严谨，但在组件里使用必须极致简单。Zenith 提供了完全符合 React Hooks 习惯的 API 。

你不需要高阶组件（ HOC ），不需要 Connect ，只需要一个 Hook：

const { useStore, useStoreApi } = createReactStore(TodoStore); function TodoList() { // 像 Zustand 一样选择状态 // 只有当 filteredTodos 变化时，组件才会重渲染 const todos = useStore((s) => s.filteredTodos); // 获取完整的 Model 实例 (Action) const store = useStoreApi(); return ( <div> {todos.map((todo) => ( // UI 只负责触发意图，不负责实现逻辑 <div OnClick={() => store.toggle(todo.id)}> {todo.text} </div> ))} </div> ); } 

4. 工程化的胜利

Zenith 不仅仅是一个状态库，它内置了 History (撤销/重做) 和 DevTools 中间件。

我用它构建了 domd markdown WYSIWYG 编辑器，能够支撑 20000 行文档流畅编辑。

结语

Zenith 的出现不是为了争论 FP 好还是 OOP 好。

它只是想告诉你：当你的项目逻辑日益复杂，当你受够了在几十个 Hook 文件中跳来跳去寻找业务逻辑时，你值得拥有一个完整的、诚实的 Model 层。

让代码重归秩序。

Github: https://github.com/do-md/zenith

欢迎 Star 和 Issue 交流！