ホームページ  >  記事  >  Vue レンダリングと React レンダリングの違いは何ですか?

Vue レンダリングと React レンダリングの違いは何ですか?

青灯夜游
青灯夜游オリジナル
2020-12-11 09:45:152618ブラウズ

違い: 1. React は JSX を通じてテンプレートをレンダリングしますが、Vue は拡張された HTML 構文を通じてレンダリングします。 2. Vue はレンダリング プロセス中に各コンポーネントの依存関係を追跡するため、コンポーネント ツリー全体を再レンダリングする必要はありませんが、React はアプリケーションのステータスが変更されたときにすべてのサブコンポーネントを再レンダリングします。

Vue レンダリングと React レンダリングの違いは何ですか?

#関連する推奨事項: 「

React ビデオ チュートリアル 」、「vue.js チュートリアル

vue レンダリングと React レンダリングの違い

1. テンプレート レンダリング メソッドの違い

表面的には、テンプレートの構文が異なります。React は JSX を通じてテンプレートをレンダリングします。 。 Vue は拡張された HTML 構文を使用してレンダリングしますが、実際にはこれは表面的な現象にすぎず、結局のところ、React は JSX に依存する必要はありません。

深いレベルでは、テンプレートの原則が異なります。これが本質的な違いです: React は、コンポーネント JS コードのネイティブ JS を通じて、補間、条件、ループなどの共通構文をテンプレートに実装します。は、より純粋でネイティブな JS 構文を通じて実装されます。 Vue は、コンポーネント JS コードから分離された別個のテンプレート内の命令を通じて実装されます。たとえば、条件ステートメントでは、これを実現するために v-if が必要です。このアプローチは少し独特で、HTML が混乱する可能性があります。

React の利点を説明する例を挙げます。react の render 関数はクロージャ機能をサポートしているため、インポートしたコンポーネントを render で直接呼び出すことができます。しかし、Vue では、テンプレートで使用したデータを転送するためにこれに掛ける必要があるため、コンポーネントをインポートした後、再度コンポーネント内で宣言する必要があります。これは明らかに非常に奇妙ですが、実行する必要があります。

2. さまざまなレンダリング プロセス

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

React は、アプリケーションの状態が変更されると、すべてのサブコンポーネントを再レンダリングします。これは shouldComponentUpdate ライフサイクル メソッドを通じて制御できますが、Vue はこれをデフォルトの最適化とみなします。

アプリケーション内の操作が複雑で、多数の UI 変更を処理する必要がある場合は、仮想 DOM を使用することをお勧めします。要素の更新が頻繁ではない場合、仮想 DOM は適切ではない可能性があり、パフォーマンスは DOM を直接操作する場合ほど良くない可能性があります。

関連する推奨事項:


2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング教育をご覧ください。 !

以上がVue レンダリングと React レンダリングの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。