render(element, vnodes)
Description
テンプレートを DOM に描画します。
m.render(document.body, 'hello');
// <body>hello</body>Signature
m.render(element, vnodes, redraw)
| 引数 | 型 | 必須 | 説明 |
|---|---|---|---|
element | Element | はい | サブツリーの親ノードとなる DOM 要素。 |
vnodes | Array<Vnode>|Vnode | はい | レンダリングする vnode。 |
redraw | () -> any | いいえ | サブツリー内のイベントハンドラが呼び出された際に実行されるコールバック。 |
| 戻り値 | undefined を返します。 |
How it works
m.render(element, vnodes) メソッドは、仮想 DOM ツリー（通常は m() ハイパースクリプト関数 を用いて生成されます）を受け取り、DOM ツリーを生成して element にマウントします。element が以前の m.render() 呼び出しによって DOM ツリーをすでにマウントしている場合、vnodes は以前の vnodes ツリーと差分比較され、既存の DOM ツリーは変更を反映するために必要な箇所のみが更新されます。変更されていない DOM ノードはそのまま維持されます。
オプションの redraw 引数を渡すと、サブツリー内の任意の場所でイベントハンドラが呼び出されるたびに、そのコールバックが実行されます。これは、自動再描画 機能を実装するために m.mount および m.redraw によって使用されますが、サードパーティフレームワークとの統合など、より高度なユースケースのために公開されています。
m.render は同期的に実行されます。
Why Virtual DOM
再描画のたびに vnode ツリーを生成するのは非効率に思えるかもしれませんが、実際には、JavaScript データ構造の作成と比較は、DOM の読み取りや変更に比べて非常に低コストです。
DOM 操作は、いくつかの理由でコストが高くなる可能性があります。読み取りと書き込みを交互に行うと、ブラウザで短時間に連続して再描画が発生し、パフォーマンスに悪影響を与える可能性があります。一方、仮想 DOM ツリーを比較することで、書き込みを 1 回の再描画にまとめることができます。また、さまざまな DOM 操作のパフォーマンス特性は実装によって異なり、すべてのブラウザで学習して最適化することが難しい場合があります。たとえば、一部の実装系では、childNodes.length の読み取りの計算量が O(n) になる場合があります。また、parentNode を読み取ると再描画が発生する実装系もあります。
対照的に、JavaScript データ構造の走査は、はるかに予測可能で安定したパフォーマンス特性を持ちます。さらに、vnode ツリーは、最新の JavaScript エンジンが hidden class などの積極的な最適化を適用して、より優れたパフォーマンスを実現できるように実装されています。
Differences from other API methods
m.render() メソッドは、内部的に m.mount()、m.route()、m.redraw() および m.request() から呼び出されます。ストリームの更新 後に直接呼び出されることはありません。
m.mount() や m.route() とは異なり、m.render() を用いてレンダリングされた vnode ツリーは、ビューイベント、m.redraw() 呼び出し、m.request() 呼び出しに応答して自動的に再描画されることはありません。これは、Mithril.js の組み込みの自動再描画システムに依存せず、手動でレンダリングを制御したいライブラリ開発者向けの低レベルなメカニズムです。
もう 1 つの違いとして、m.render メソッドは第 2 引数として vnode (または vnode の配列) を受け取るのに対し、m.mount() や m.route() はコンポーネントを受け取る点が挙げられます。
Standalone usage
var render = require("mithril/render")
m.render モジュールは、Knockout、React、Vue などのビューライブラリと同等の機能を提供します。最新の検索空間削減アルゴリズムと DOM リサイクルを備えた仮想 DOM 差分エンジンを実装しており、初期ページロードと再レンダリングの両面において、トップクラスのパフォーマンスを発揮します。require("mithril/render/vnode") を通じて公開される正規化処理を除き、Mithril.js の他の部分への依存関係はなく、スタンドアロンライブラリとして使用できます。
比較的小規模ながらも、render モジュールは完全に機能し、自己完結型です。SVG、カスタム要素、およびすべての有効な属性とイベントを、大文字小文字の区別による特殊な事例や例外なく、期待どおりにすべてサポートします。もちろん、コンポーネント と ライフサイクルメソッド も完全にサポートしています。
m.render をスタンドアロンモジュールとして使用する際は、レンダリング対象の vnode を作成するために、ハイパースクリプト関数 もインポートすると便利です。