跳至主要内容
版本:0.21

底层库内部

html! 宏的底层

html! 宏将使用自定义 HTML 类似语法编写的代码转换为有效的 Rust 代码。使用此宏对于开发 Yew 应用程序并不是必需的,但建议使用。此宏生成的代码使用公共 Yew 库 API,如果你愿意,可以直接使用该 API。请注意,某些使用的方法有意不记录,以避免意外误用。随着 yew-macro 的每次更新,生成的代码将更高效,并且无需对 html! 语法进行太多(如果有的话)修改即可处理任何重大更改。

由于 html! 宏允许你以声明式风格编写代码,你的 UI 布局代码将与为页面生成的 HTML 紧密匹配。随着你的应用程序变得更加交互式且代码库变得更大,这将变得越来越有用。宏将为你处理所有手动编写代码以自行操作 DOM 的工作,而不是手动编写所有代码。

使用 html! 宏可能会感觉非常神奇,但它并没有什么隐藏之处。如果你好奇它是如何工作的,请尝试在你的程序中展开 html! 宏调用。有一个名为 cargo expand 的有用命令,它允许你查看 Rust 宏的展开。默认情况下,cargo expand 不会随 cargo 一起提供,因此如果你尚未安装,则需要使用 cargo install cargo-expand 安装它。Rust-Analyzer 还提供了一种机制,用于 从 IDE 中获取宏输出

html! 宏的输出通常非常简洁!这是一个特性:机器生成的代码有时会与应用程序中的其他代码冲突。为了防止问题,“proc_macro”的“卫生”得到遵守。一些示例包括

  1. 宏生成 ::yew::<module> 而不是使用 yew::<module>,以确保正确引用 Yew 包。这也是为什么调用 ::alloc::vec::Vec::new() 而不是仅调用 Vec::new() 的原因。
  2. 由于潜在的特征方法名称冲突,<Type as Trait> 用于确保我们正在使用来自正确特征的成员。

什么是虚拟 DOM?

DOM(“文档对象模型”)是浏览器为你的网页管理的 HTML 内容的表示。一个“虚拟”DOM 仅仅是保存在应用程序内存中的 DOM 的副本。管理虚拟 DOM 会导致更高的内存开销,但通过避免或延迟使用浏览器 API,可以批量处理并进行更快的读取。

对于促进声明式 UI 使用的库来说,在内存中拥有 DOM 副本可能会有所帮助。该库可以使用 DOM “diffing” 的通用方法,而不是需要特定代码来描述如何根据用户事件修改 DOM。当 Yew 组件更新并希望更改其呈现方式时,Yew 库将构建虚拟 DOM 的第二个副本,并直接将其与镜像当前屏幕内容的虚拟 DOM 进行比较。这两个副本之间的“diff”(或差异)可以分解为增量更新,并使用浏览器 API 批量应用。应用更新后,将丢弃旧的虚拟 DOM 副本,并保存新的副本以供将来进行 diff 检查。

随着时间的推移,可以优化此“diff”算法以提高复杂应用程序的性能。由于 Yew 应用程序使用 WebAssembly 运行,我们相信 Yew 在未来采用更复杂的算法方面具有竞争优势。

Yew 虚拟 DOM 并不完全与浏览器 DOM 一一对应。它还包括用于组织 DOM 元素的“列表”和“组件”。列表可以简单地是有序元素列表,但也可以更强大。通过为每个列表元素添加“键”注释,应用程序开发人员可以帮助 Yew 进行额外的优化,以确保在列表更改时,完成最少的工作量以计算 diff 更新。类似地,组件提供自定义逻辑来指示是否需要重新渲染以帮助提高性能。

Yew 调度程序和组件作用域事件循环

为文档做出贡献 - 深入解释 yew::scheduleryew::html::scope 的工作原理

进一步阅读