渲染 — $mol

渲染

本章講的是在你的響應式狀態發生變化與螢幕上的像素更新之間發生了什麼。你很少需要去想它——但理解這個模型能解釋為什麼 $mol 程式碼無需特別努力就能保持快速。

沒有虛擬 DOM

$mol 不對虛擬樹做 diff。每個視圖屬性都透過你在

狀態中已經見過的那些響應式單元，直接綁定到它所控制的 DOM 節點或屬性上。當一個單元變化時，只有讀取它的那些確切綁定會重新執行——不是一整棵子樹，不是一個元件函式，只是受影響的屬性。這意味著沒有需要最佳化的協調過程，沒有需要為列表 diff 手動調整的鍵，也沒有需要求助的 memo/shouldComponentUpdate。依賴圖已經知道那組最小的更新。

元件是惰性的

只有當有東西請求視圖時，它才會被建立。你從不導覽到的畫面永遠不會被建立；你從不開啟的分頁毫無開銷。由於建立是按需且帶快取的，組合龐大的元件樹代價很低——不需要的部分根本還不存在。

渲染是虛擬化的

$mol 只渲染視口之內的東西。捲動出視野的元件不會作為隱藏的 DOM 保留下來——它們根本不會被建立，只有當它們捲動進範圍時才被建立。這是框架的架構特性，而不是一個可選功能或某個特殊的列表元件：任何版面配置都是虛擬化的，所以顯示十個項目的列表和一萬個項目的列表代價大致相同。實際的效果是，你編寫普通的元件樹和長列表，而無需求助於視窗化函式庫。

可重現的數字

效能主張只有在你能重現時才有用。$mol 不在這裏引用數字，而是參與社群的 js-framework-benchmark；你可以閱讀它的結果並自己重新執行整套測試：

js-framework-benchmark 結果把它當作比較的真相來源——經過測量、帶版本，並且獨立於本頁面。

下一步

這樣就講完了 $mol 執行方式的核心模型。接下來，在

資料獲取中讓它載入真實資料、開始工作。在 GitHub 上編輯此頁這有幫助嗎？是否上一頁路由下一頁測試本頁內容沒有虛擬 DOM 元件是惰性的渲染是虛擬化的可重現的數字下一步