mount(root, component)
Description
コンポーネントを有効化し、ユーザーイベントに応じて自動的に再描画されるようにします。
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);
},
});Signature
m.mount(element, Component)
| Argument | Type | Required | Description |
|---|---|---|---|
element | Element | Yes | サブツリーの親ノードとなる DOM 要素 |
Component | Component|null | Yes | レンダリングされるコンポーネント。null を指定するとツリーがアンマウントされ、内部状態がクリアされます。 |
| returns | 何も返しません。 |
How it works
m.mount(element, Component) は、呼び出されると、コンポーネントを要素にレンダリングし、(element, Component) のペアを再描画サブシステムに登録します。このツリーは、手動または自動で再描画がトリガーされると、再レンダリングされます。
再描画時には、新しい vDOM ツリーと古いものが比較（または「差分」）され、既存の DOM ツリーは変更を反映するために必要な箇所のみ変更されます。変更されていない DOM ノードは変更されません。
Replace a component
element が現在のマウントポイントである状態で mount(element, OtherComponent) を実行すると、以前にマウントされていたコンポーネントが OtherComponent に置き換えられます。
Unmount
以前にコンポーネントがマウントされていた要素に対し m.mount(element, null) を実行すると、アンマウント処理が行われ、Mithril.js の内部状態がクリアされます。これは、root ノードを手動で DOM から削除する際のメモリリークを防ぐのに役立ちます。
Headless mounts
高度な状況では、画面に何もレンダリングせずに、再描画をサブスクライブしてリッスンしたい場合があります。これは、ライブ DOM ツリーに追加されていない要素で m.mount を呼び出し、マウントしているコンポーネントにすべてのロジックを配置することで実現できます。コンポーネントには view が必要ですが、有用な値を返す必要はなく、null や undefined などの値を返しても問題ありません。
var elem = document.createElement('div');
// Subscribe (サブスクライブ)
m.mount(elem, {
oncreate: function () {
// once added: 追加されたとき
},
onupdate: function () {
// on each redraw: 再描画ごと
},
onremove: function () {
// clean up whatever you need: 必要なものをクリーンアップ
},
// Necessary boilerplate (必要なボイラープレート)
view: function () {},
});
// Unsubscribe (サブスクライブ解除)
m.mount(elem, null);他のマウントルートを気にする必要はありません。複数のルートがサポートされており、互いに干渉することはありません。別のフレームワークと統合するときに、コンポーネントで上記を実行することもできます。問題ありません。
Performance considerations
再描画ごとに vnode ツリーを生成するのは無駄に思えるかもしれませんが、実際には JavaScript のデータ構造を作成し比較する処理は、DOM の読み書きに比べて非常に低コストです。
DOM 操作は、いくつかの理由で非常に高コストになる可能性があります。読み取りと書き込みを交互に行うと、ブラウザの再描画が頻繁に発生し、パフォーマンスに悪影響を与える可能性があります。一方、仮想 DOM ツリーを比較すると、書き込みを 1 回の再描画にまとめることができます。また、さまざまな DOM 操作のパフォーマンス特性は実装によって異なり、すべてのブラウザで学習して最適化することが難しい場合があります。たとえば、一部の実装では、childNodes.length の読み取りの複雑さは O(n) です。一部では、parentNode を読み取ると再描画が発生します。
対照的に、JavaScript データ構造のトラバースは、はるかに予測可能で安定したパフォーマンス特性を持ちます。さらに、vnode ツリーは、最新の JavaScript エンジンが隠しクラスなどの積極的な最適化を適用して、さらに優れたパフォーマンスを実現できるように実装されています。
Differences from m.render
m.mount を介してレンダリングされたコンポーネントは、ビューイベント、m.redraw() の呼び出し、または m.request() の呼び出しに応じて自動的に再描画されます。Vnode は m.render() を介してレンダリングされた場合、自動的に再描画されません。
m.mount() は、ルーティング処理を別のライブラリやフレームワークに委ねている既存のコードベースに Mithril.js のウィジェットを組み込むアプリケーション開発者にとって、Mithril.js の自動再描画機能を活用できる点で適しています。
m.render() は、レンダリングを手動で制御したいライブラリ開発者（サードパーティ製ルーターとの連携や、Redux のようなデータレイヤーライブラリの使用など）に適しています。