Dodrio

Dodrio 是一个为 Rust 和 WebAssembly 设计的快速、bump 分配的虚拟 DOM 库。请注意，Dodrio 仍然处于 实验性 状态。

• 警告
• 示例
• 设计
  • bump 分配
  • 作为栈机器的更改列表
  • 库 — 不是框架

警告

我重申，Dodrio 处于一个非常 实验性 的状态。它可能存在错误，而且没有人将其用于生产。

示例

以下是经典的 "Hello, World!" 示例

struct Hello {
    who: String,
}

impl Render for Hello {
    fn render<'a>(&self, cx: &mut RenderContext<a>) -> Node<'a> {
        let who = bumpalo::format!(in cx.bump, "Hello, {}!", self.who);
        div(cx)
            .children([text(who.into_bump_str())])
            .finish()
    }
}

更多示例可以在 的 examples 目录中找到，包括

• counter：增加和减少计数器。
• input-form：读取 <input> 并显示其内容。
• todomvc：著名的 TodoMVC 应用的实现。
• moire：WebRender Moiré 图案演示。
• game-of-life：使用 Dodrio 而不是 2D 画布渲染 Rust 和 WebAssembly 书的 Game of Life 教程。
• js-component：使用 dodrio-js-api 包定义一个在 JavaScript 中的渲染组件。

Cargo 功能

• log — 使用 log 包的界面启用针对调试的日志消息。您仍然需要初始化一个日志记录器，以便消息可以到达任何地方，例如 console_log。

• serde — 为 serde::{Serialize, Deserialize} 实现 Cached<R>，其中 R 可序列化和反序列化。

设计

bump 分配

bump 分配基本上是分配对象的最快方法。它有一些限制，但当分配寿命与程序阶段匹配时，效果尤其好。而虚拟 DOM 非常具有阶段性。

Dodrio 维护三个 bump 分配区域

1. 最新、最准确的虚拟 DOM。虚拟 DOM 节点本身以及创建它们时所需的任何临时容器都分配到这个区域。
2. 之前的虚拟DOM。这反映了物理DOM的当前状态。
3. (1)和(2)之间的差异。这是一系列DOM变异操作——通俗地说，称为“变更列表”——如果应用到物理DOM上，将使物理DOM与(1)匹配。

渲染过程如下

1. 应用程序状态被渲染到增量分配区域(1)。
2. (1)与(2)进行比较，并将更改输出到(3)。
3. JavaScript代码将(3)中的变更列表应用到物理DOM上。
4. (1)和(2)进行交换，采用双缓冲风格，新的(1)及其增量分配指针被重置，同样(3)也是如此。
5. 重复以上步骤。

作为栈机器的更改列表

表示物理DOM当前外观和理想虚拟DOM状态的差异的变更列表被编码在一个微型堆栈机语言中。堆栈机在应用DOM差异方面特别有效，这个任务本质上是一个树遍历。

库 — 不是框架

Dodrio只是一个库。(我提到它是实验性的吗？)它不是一个完整的、完整的、包含所有前端Web开发的解决方案。它也从未打算成为那样的解决方案。