React 缺失的“M”层：我开发了 Zenith，重塑完整的 ModeljaydenWang:迷失的 Model我们在谈论 React 时常说 UI = f(State)

08:44 · 2025年12月25日 · 周四

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

jaydenWang:

迷失的 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 交流！

via V2EX-最热主题 (author: jaydenWang)