基本ライブラリの内部詳細
html! マクロの内部
html! マクロは、HTMLに似たカスタム構文で記述されたコードを有効なRustコードに変換します。このマクロを使用することはYewアプリケーションの開発に必須ではありませんが、推奨されています。このマクロが生成するコードはYewのパブリックライブラリAPIを使用しており、希望すれば直接使用することもできます。いくつかのメソッドは意図的に文書化されていないため、誤用を避けるために注意が必要です。yew-macroの各更新により、生成されるコードはより効率的になり、html!構文をほとんど（または全く）変更することなく破壊的な変更を処理できるようになります。
html! マクロを使用すると、宣言的なスタイルでコードを記述できるため、UIレイアウトコードはページのHTMLに非常に似たものになります。アプリケーションがよりインタラクティブになり、コードベースが大きくなるにつれて、この方法はますます有用になります。DOM 操作のすべてのコードを手動で記述するのに比べて、マクロがこれらすべてを処理してくれます。
html! マクロの使用は非常に魔法のように感じるかもしれませんが、隠すべきものは何もありません。その仕組みに興味がある場合は、プログラム内の html! マクロ呼び出しを展開してみてください。cargo expand という便利なコマンドがあり、Rustマクロの展開を確認できます。cargo expand はデフォルトで cargo に含まれていないため、まだインストールしていない場合は cargo install cargo-expand を使用してインストールする必要があります。Rust-Analyzer もIDEからマクロ出力を取得するメカニズムを提供しています。
html! マクロの出力は通常非常に簡潔です！これは特徴です：機械生成のコードは時々アプリケーション内の他のコードと衝突することがあります。問題を防ぐために、proc_macro は「衛生」ルールに従っています。いくつかの例を以下に示します：
- Yewパッケージを正しく参照するために、マクロ生成コードでは
::yew::<module>を使用し、直接yew::<module>を使用しません。これは::alloc::vec::Vec::new()を呼び出すのと同じ理由です。 - トレイトメソッド名の衝突を避けるために、
<Type as Trait>を使用して正しいトレイトメンバーを使用していることを確認します。
仮想 DOM とは？
DOM（「ドキュメントオブジェクトモデル」）は、ブラウザによって管理されるHTMLコンテンツの表現です。「仮想」 DOM は、単にメモリ内の DOM のコピーです。仮想 DOM を管理することで、メモリのオーバーヘッドが増加しますが、ブラウザAPIの使用を回避または遅延させることでバッチ処理と高速な読み取りを実現できます。
メモリ内に DOM のコピーを持つことは、宣言的UIを使用するライブラリの使用を促進するのに役立ちます。ユーザーイベントに基づいて DOM を変更するための特定のコードが必要な場合とは異なり、ライブラリは一般的な方法を使用して DOM の「差分」を行うことができます。Yewコンポーネントが更新され、そのレンダリング方法を変更したい場合、Yewライブラリは仮想 DOM の2番目のコピーを構築し、現在画面上に表示されている内容をミラーリングする仮想 DOM と直接比較します。両者の「差分」は増分更新に分解され、ブラウザAPIと共に適用されます。更新が適用されると、古い仮想 DOM のコピーは破棄され、新しいコピーが将来の差分チェックのために保存されます。
この「差分」アルゴリズムは、時間の経過とともに最適化され、複雑なアプリケーションのパフォーマンスを向上させることができます。YewアプリケーションはWebAssemblyを介して実行されるため、Yewは将来的により複雑なアルゴリズムを採用する上で競争力を持つと信じています。
Yewの仮想 DOM はブラウザの DOM と完全に一対一対応しているわけではありません。DOM 要素を整理するための「リスト」や「コンポーネント」も含まれています。リストは単に要素の順序付きリストである場合もありますが、より強力な場合もあります。各リスト要素に「キー」注釈を追加することで、アプリケーション開発者はリストが変更されたときに差分更新の計算に必要な作業量を最小限に抑えるための追加の最適化をYewに提供できます。同様に、コンポーネントは再レンダリングが必要かどうかを示すカスタムロジックを提供し、パフォーマンスを向上させるのに役立ちます。
Yewスケジューラとコンポーネントスコープのイベントループ
貢献ドキュメント - yew::scheduler と yew::html::scope の仕組みを詳しく説明