React と Vue はどのようにレンダリングされますか? React と Vue のレンダリング プロセスの概要

この記事では主にreactとvueのレンダリングプロセスを詳細なプロセス図とともに紹介しています

reactとvueのレンダリングプロセスの比較

です。 Facebook によって作成されたフレームワークで、仮想 dom と新しい js syntax-jsx を推進しています。2013 年 5 月にオープンソース化されました。React は、ユーザー インターフェイスの構築に使用される JavaSCRIPT ライブラリです。 React は主に UI を構築するために使用されます。React は MVC の V (ビュー) であると多くの人が考えています。

効率的 -React は DOM (仮想 dom) をシミュレートすることで DOM との対話を最小限に抑えます。

1. 柔軟性 - React は既知のライブラリやフレームワークとうまく連携します。

2. JSX -JSXはJavaScript構文の拡張です。

3. コンポーネント − React を通じてコン​​ポーネントを構築すると、コードの再利用が容易になり、大規模なプロジェクトの開発にうまく適用できます

4. 一方向の応答データ フロー − React は一方向の応答データ フローを実装し、それにより重複を削減しますコードなので、従来のデータ バインディングよりも簡単です。
Vue 作者 You Yuxi は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、開始が簡単であるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツール チェーンやさまざまなサポート ライブラリと組み合わせると、Vue は複雑な単一ページ アプリケーション用のドライバーを提供することができます。

6. vueの特徴

MVVMフレームワーク、双方向データバインディング原則、データ駆動型、コンポーネント化、軽量、簡潔、効率的、モジュールフレンドリー

仮想DoM

仮想domの概念とは何ですか

Vue.js (2.x) と React の最大の類似点の 1 つは、どちらも「仮想 DOM」と呼ばれるものを使用していることです。いわゆる仮想 DOM は、基本的にその名前の意味どおり、仮想 DOM を意味します。

DOM ツリーの仮想表現。これは、実際の DOM 状態を変更することは、JavaScript オブジェクトを変更するよりもはるかにコストがかかるという概念に基づいて誕生しました。

仮想 DOM は、実際の DOM をマップする JavaScript オブジェクトです。要素の状態を変更する必要がある場合は、実際の DOM を直接変更するのではなく、まず仮想 DOM を変更する必要があります。変更が発生すると、新しい仮想 DOM オブジェクトが作成され、古い仮想 DOM と新しい仮想 DOM の差が計算されます。これらの違いは実際の DOM に適用されます。

reactレンダリングプロセス

babel変換ツールのアドレス: http://babeljs.io/repl/

1. Reactでは、jsxを使用してコンポーネントを記述し、babelによって純粋なjsに変換されます。 Preact h 関数はこの js を DOM ツリーに変換し、最後に Preact の仮想 DOM アルゴリズムが仮想 DOM を実際の DOM ツリーに変換してアプリケーションを構築します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

React Reference Manual

のコラムにアクセスして学習してください)

2. 実際の仮想 DOM は上記の例よりも複雑になりますが、本質的にはネストされたネイティブ オブジェクトです。配列。この JavaScript オブジェクトに新しい項目が追加されると、関数によって新旧の仮想 DOM の差分が計算され、実際の DOM に反映されます。差分を計算するアルゴリズムが、高パフォーマンスのフレームワークの秘密です。

解析プロセスの概要

React は Virtual DOM に依存しますが、Vue.js は DOM テンプレートを使用します。 React によって使用される仮想 DOM は、レンダリングされた結果に対してダーティ チェックを実行します。

vue のレンダリング プロセス

Vue は、レンダリング プロセス中に各コンポーネントの依存関係を追跡し、コンポーネント ツリー全体を再レンダリングする必要がないため、仮想 DOM の差分をより速く計算できると主張しています。 。

プロセス例図

テンプレートをコンパイルした後、Vue のコンパイラーはこれらのテンプレートをレンダリング関数にコンパイルします。この関数が呼び出されると、仮想 DOM ツリーがレンダリングされて返されます。このツリーは非常に軽量であり、その役割は現在のインターフェイスの状態を記述することです。

この仮想ツリーを取得したら、それをパッチ関数に渡します。この関数は、これらの仮想 DOM を実際の DOM に実際に適用する役割を果たします。このプロセスでは、Vue はレンダリング プロセス中に依存するデータ ソースを検出する独自の応答システムを備えています。

レンダリング プロセスでは、データ ソースが検出された後、データ ソースの変化を正確に認識できます。その時点で、必要に応じて再レンダリングできます。

再レンダリング後、新しいツリーが生成され、新しいツリーと古いツリーを比較することで、最終的に実際の DOM に適用する必要のある変更を取得できます。最後に、パッチ機能を通じて変更が適用されます。

要点は次のように要約できます

• 特定のデータ属性が使用されると、ゲッターがトリガーされ、この属性はウォッチャーによって依存関係として記録されます。

• 関数全体がレンダリングされると、使用されたすべてのデータ属性が記録されます。

• 対応するデータが変更されると、たとえば新しい値が与えられると、セッターがトリガーされて、対応するデータが変更されたことをデータオブジェクトに通知します。

• この時点で、対応するコンポーネントには、データの依存関係が変更され、再レンダリングする必要があることが通知されます。

• 対応するコンポーネントは再びレンダリング機能を動員して仮想 DOM を生成し、DOM 更新を実装します。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact ユーザーマニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がReact と Vue はどのようにレンダリングされますか? React と Vue のレンダリング プロセスの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。