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)

引数	型	必須	説明
`element`	`Element`	Yes	サブツリーの親ノードとなるDOM要素
`component`	`Component\|null`	Yes	レンダリングするコンポーネント`null`を指定するとツリーをアンマウントし、内部状態を片付けます。
返り値			何も返しません

どのように動作するのか

m.render()と煮ていますが、m.mount()はコンポーネントを受け取ってelementで指定されるDOMツリーにマウントします。もしelementに対して以前m.mount()が呼ばれていてマウント済みだった場合は、その以前のvnodeと現在のDOMツリーの差分を取り、変更が必要な個所だけ更新します。変更がないDOMは触れられません。

コンポーネントの置き換え

すでにマウント済みのelementに対してmount(element, OtherComponent)を実行すると、以前マウントされたコンポーネントとOtherComponentを置き換えます。

アンマウント

以前にマウントされたコンポーネントを持つエレメントに対してm.mount(element, null)を使用すると、そのコンポーネントがアンマウントされ、Mithrilの内部状態が片付けられます。これはrootノードをDOMから取り除く的にメモリリークを防ぐのに役立ちます。

パフォーマンスに関する考察

すべての再描画でvnodeツリーを生成するのは無駄に思えるかもしれませんが、JavaScriptのデータ構造の作成と比較は、DOMの読み取りと変更に比べてかなりコストに差があり、メリットがあります。

DOMを触るのはいくつかの理由により高コストになります。読取りと書込みを交互に行うと、ブラウザに寄っては再表示が連続して発生しパフォーマンスに悪影響を及ぼします。一方、仮想DOMツリーでは再描画1回のコストで済みます。また、DOM操作のパフォーマンス特性はブラウザ実装によって異なるため、すべてのブラウザで最適化するのが簡単ではありません。例えば、childNodes.lengthにアクセスするだけO(n)のコストがかかり、parentNodeにアクセスすると再描画が行われるブラウザもあります。

JavaScriptのデータ構造のトラバースでは、割り込みが入ることもなく予測可能で安定したパフォーマンス特性を発揮します。これに加えて、モダンなJavaScriptエンジンではhidden classのような積極的な最適化を行います。

m.renderとの違い

m.mount によってレンダリングされたコンポーネントは、ビューイベント、<m1>m.redraw()呼び出し、またはm.request()イベントに応答して再描画を自動で行います。m.render()でレンダリングしたvnodeはそうではありません。

m.mount()は、Mithrilの自動再描画機能を利用しながら、Mithrilウィジェットを既存のコードベースに統合するアプリケーション開発者に適しています。

m.render()は、レンダリングを手動で制御したい（例えば、サードパーティのラウターに接続する場合、や、Reduxのようなサードパーティのデータレイヤーライブラリを使用する場合など）ライブラリ作成者に適しています。

Mithril 1.1.0