mount(root, component)

描述

啟用一個元件，使其能夠在使用者事件發生時自動重繪。

var state = {
  count: 0,
  inc: function () {
    state.count++;
  },
};

var Counter = {
  view: function () {
    return m('div', { onclick: state.inc }, state.count);
  },
};

m.mount(document.body, Counter);

若要在掛載元件時傳遞參數，可以使用以下方式：

m.mount(element, {
  view: function () {
    return m(Component, attrs);
  },
});

簽名

m.mount(element, Component)

引數	類型	是否必填	描述
element	Element	是	一個 DOM 元素，它將作為子樹的父節點。
Component	Component|null	是	要渲染的元件。 傳入 null 會卸載元件樹並清理內部狀態。
返回值			不回傳任何值。

如何閱讀簽名

運作方式

m.mount(element, Component) 被呼叫時，會將元件渲染到指定的元素中，並將 (element, Component) 這一配對註冊到重繪系統。當觸發手動或自動重繪時，該元件樹將會被重新渲染。

在重繪時，新的 vDOM 樹會與舊的 vDOM 樹進行比對（或稱作“差異比較”），並且只會在需要反映變更時才修改現有的 DOM 樹。未變更的 DOM 節點將不會被修改。

取代元件

當 element 是一個當前掛載點時，執行 mount(element, OtherComponent) 會將先前掛載的元件替換為 OtherComponent。

卸載

在已經掛載元件的元素上使用 m.mount(element, null) 會卸載該元件，並清理 Mithril.js 的內部狀態。當從 DOM 中手動移除 root 節點時，這有助於防止記憶體洩漏。

無介面掛載

在某些更進階的情況下，您可能希望訂閱並監聽 重繪，而無需將任何內容渲染到螢幕上。這可以使用無介面掛載來實現，只需使用未添加到活躍 DOM 樹的元素調用 m.mount，並將所有有用的邏輯放入您要掛載的元件中即可。您仍然需要在元件中定義 view 函式，但它不必返回任何有意義的值，可以只返回一個無效值，例如 null 或 undefined。

var elem = document.createElement('div');

// Subscribe
m.mount(elem, {
  oncreate: function () {
    // 一旦添加
  },
  onupdate: function () {
    // 在每次重繪時
  },
  onremove: function () {
    // 清理任何您需要的東西
  },

  // 必要的樣板
  view: function () {},
});

// 取消註冊
m.mount(elem, null);

無需擔心其他掛載根。支援多個根，它們不會互相干擾。您甚至可以在與另一個框架整合時在元件中執行上述操作，這不會有問題。

效能考量

在每次重繪時都產生一個 vnode 樹似乎有些浪費，但事實證明，與讀取和修改 DOM 相比，建立和比較 JavaScript 資料結構的成本其實相當低。

由於一些原因，直接操作 DOM 的成本可能非常昂貴。交替讀取和寫入可能會因為導致瀏覽器頻繁重繪而對效能產生不利影響，而比較虛擬 DOM 樹則允許將多次寫入操作合併為單次重繪。此外，各種 DOM 操作的效能特性在不同實現之間存在差異，並且可能難以學習和針對所有瀏覽器進行優化。例如，在某些實現中，讀取 childNodes.length 的複雜度為 O(n)；在某些實現中，讀取 parentNode 會導致重繪等等。

相反，遍歷 JavaScript 資料結構具有更可預測和合理的效能特性，此外，vnode 樹的實現方式使得現代 JavaScript 引擎能夠應用積極優化，例如隱藏類，以獲得更好的效能。

與 m.render 的差異

透過 m.mount 渲染的元件會自動重繪，以回應視圖事件、m.redraw() 的呼叫或 m.request() 的呼叫。透過 m.render() 渲染的 Vnode 則不會。

m.mount() 適用於將 Mithril.js 小部件整合到現有程式碼庫中的應用程式開發人員，在這些程式碼庫中，路由由其他函式庫或框架處理，同時仍然可以享受 Mithril.js 的自動重繪功能。

m.render() 適用於希望手動控制渲染的函式庫作者，例如，當連接到第三方路由器或使用第三方資料層函式庫（如 Redux）時。