跳到主要內文
版本:0.21

低階程式庫內部

html! 巨集的底層

html! 巨集可以將使用自定義 HTML 類似語法寫成的程式碼轉換成有效的 Rust 程式碼。使用這個巨集對於開發 Yew 應用程式並非必要,但它仍是推薦的作法。這個巨集產生的程式碼使用了 Yew 公共程式庫 API,而你可以根據自己的意願直接使用這項 API。請注意,某些用到的方法是刻意不提供文件,以避免意外誤用。隨著 yew-macro 的每次更新,產生的程式碼也會更有效率,而且能處理在 html! 語法中不需進行大量修改(如果有的話)所造成的任何重大變更。

由於 html! 巨集允許你使用宣告式風格撰寫程式碼,你的使用者介面配置程式碼就會與為頁面產生的 HTML 十分接近。當你的應用程式變得越來越具有互動性,而且你的程式碼庫也越來越大的時候,這就會變得越來越有幫助。這個巨集會幫你處理所有用於手動撰寫程式碼以自行操作 DOM 的工作。

使用 html! 巨集看來相當神奇,但它並未隱藏任何東西。如果您好奇它的運作方式,請嘗試擴充程式中的 html! 巨集呼叫。有一個稱為 cargo expand 的實用指令,可讓您查看 Rust 巨集的擴充。預設情況下 cargo 並不會附帶 cargo expand,因此如果您尚未安裝,則需要使用 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「對比」這種通用的方法,而不必使用特定程式碼來描述應如何修改 DOM 以回應使用者事件。當一個 Yew 元件更新並想要變更所呈現的方式時,Yew 函式庫會建立一份虛擬 DOM 的第二個副本,並直接將它與反映目前畫面所示內容的虛擬 DOM 進行比較。這兩個副本之間的「diff」(或差異)可以分解為遞增的更新,並透過瀏覽器 API 以批次處理的方式套用。更新套用後,舊的虛擬 DOM 副本將會被丟棄,而新的副本則會儲存起來,以供將來的 diff 檢查使用。

這個「diff」演算法可以隨著時間進行最佳化,以提升複雜應用程式的效能。由於 Yew 應用程式使用 WebAssembly 執行,我們相信 Yew 在未來採用更精密的演算法方面具有競爭優勢。

Yew 虛擬 DOM 並非與瀏覽器 DOM 完全相同。它也包括用於組織 DOM 元素的「清單」和「組件」。清單可以僅為一個元素的有序清單,但也可以強大許多。通過用「金鑰」標示每個清單元素,應用程式開發人員可以協助 Yew 做出額外的最佳化,以確保在清單變更時,完成差異更新運算時所做的工作量最少。類似地,組件會提供自訂邏輯以指示是否需要重新載入來提升效能。

Yew 排程器和組件範圍事件迴圈

協助編寫文件 - 詳細說明 yew::scheduleryew::html::scope 如何運作

延伸讀物