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 crate 定义 JavaScript 渲染组件。

Cargo 功能

• log — 使用 log crate 的外观启用面向调试的日志消息。您仍然需要初始化一个记录器，以便消息可以发送到任何地方，例如 console_log。

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

设计

Bump 分配

增量分配是分配对象最快的方法。它有一些限制，但当分配的生存期与程序阶段相匹配时，效果特别出色。并且虚拟 DOM 非常面向阶段。

Dodrio 维护了三个增量分配区域

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

渲染过程如下

1. 应用程序状态被渲染到增量分配区域 (1)。
2. (1) 与 (2) 进行 diff 操作，并将更改输出到 (3)。
3. JavaScript 代码将 (3) 中的变更列表应用到物理 DOM 上。
4. (1) 和 (2) 交换，采用双缓冲方式，新的 (1) 的增量分配指针被重置，(3) 也是如此。
5. 重复此过程。

将更改列表作为栈式机器

表示物理 DOM 当前外观与我们理想虚拟 DOM 状态之间的差异的变更列表被编码在一个微型堆栈机器语言中。堆栈机器非常适合应用 DOM 差分，这是一个本质上是树遍历的任务。

库 — 非 框架

Dodrio 只是一个库。（我提到它是实验性的吗？！）它不是一个完整、完整、带电池的解决方案，用于所有前端 Web 开发。它也永远不会成为那样的解决方案。