MDAN MDAN Docs
官网

自定义渲染

当你想保留 MDAN 的浏览器运行时,但希望由自己的框架完全接管 UI 时,就走这条路径。

共同原则

也就是说:保留 MDAN 行为层,视图层由你自己接管。

生命周期模式

不管是 Vue 还是 React,都建议遵循同样的模式:

  1. 在组件挂载生命周期里只创建一次 host。
  2. 创建后立即订阅当前状态。
  3. 再调用 host.mount()。
  4. 在销毁阶段取消订阅并 host.unmount()。

这样可以避免重复订阅、陈旧的运行时实例和内存泄漏。

表单与操作模式

UI 应从当前状态和本地表单状态推导,而不是复制一套服务端假设。

Vue 示例

参考:examples/vue-starter/app/client.ts

适合想让 Vue 接管组件树和视觉系统,但继续使用 MDAN 规范语义和运行时的场景。

React 示例

参考:examples/react-starter/app/client.tsx

适合想让 React 接管状态投影和交互组件,但继续复用 MDAN 运行时的场景。

使用第三方 Markdown 渲染器

如果你不想使用内置的 Markdown 渲染方式,也可以把第三方渲染器接到这条路径里。

常见选择包括:

对应示例有两类:

如果你希望服务端输出和默认 UI 也共用同一套规则,可以再看:

通常推荐把同一个渲染器同时注入到:

这样服务端输出的 HTML 和默认 UI 的呈现规则会保持一致。

常见坑

相关文档