V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jaydenWang
V2EX  ›  前端开发

做 WYSIWYG Markdown 编辑器时,我为什么没继续用 zustand,而是写了 Zenith

  •  
  •   jaydenWang · 7 小时 52 分钟前 · 381 次点击

    我在做一个 WYSIWYG Markdown 编辑器( domd ),体积大约 20KB 。这是一个纯数据驱动的编辑器。

    Demo: WYSIWYG Markdown

    在这个编辑器里,状态管理是核心问题。我把 domd 的状态管理单独抽出来, 封装成了一个库:Zenith 。

    Github: Zenith

    Zenith 的思路并不复杂: 把派生状态、缓存和依赖关系,明确地放在 store 内部, 而不是分散在组件和各种 selector 里。

    这样带来的结果是:

    • 派生状态可以被稳定缓存
    • 组件拿到的是稳定引用
    • 性能表现更可预测,不需要反复“调”

    另一个比较关键的点是 undo / redo 。 Zenith 是基于 Immer patch 的, 不依赖整棵 state 的快照。 在大数据量、频繁编辑的场景下,这一点差异很明显。

    Zenith 不是通用型状态库,也不追求简单。 如果你在做编辑器、画布或类似的复杂前端, 可能会对这种设计方式有兴趣。

    4 条回复    2025-12-15 11:36:18 +08:00
    deng565430
        1
    deng565430  
       7 小时 28 分钟前
    看了下,和 zustand 比反而复杂了,zustand 也能使用 immer
    jaydenWang
        2
    jaydenWang  
    OP
       7 小时 15 分钟前
    抛开 immer ,Zenith 和 Zustand 最主要区别是:
    1. Zustand 太自由了,Zenith 修改状态只能约束在 store 中,工程化不友好
    2. Zenith 支持使用 memo 计算属性
    3. Zenith 派生状态都内聚在 store 中
    gyrogogogo
        3
    gyrogogogo  
       6 小时 17 分钟前
    用 mobx 行不
    jaydenWang
        4
    jaydenWang  
    OP
       6 小时 7 分钟前
    Zenith store 灵感来源于 mobx 的<https://zh.mobx.js.org/defining-data-stores.html>这篇文章。但是实现和 api 不相同
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   4862 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:43 · PVG 17:43 · LAX 01:43 · JFK 04:43
    ♥ Do have faith in what you're doing.