11. React と Vue、その類似点と相違点についての理解
類似点:
コア ライブラリに重点を置き、ルーティングやグローバル状態管理などの他の機能は関連ライブラリに任せます。
どちらも独自のビルド ツールを備えており、ベスト プラクティスに従ってプロジェクト テンプレート セットを取得できます。両方とも Virtual DOM (仮想 DOM) を使用して再描画パフォーマンスを向上させます。
すべてに小道具の概念があり、コンポーネント間のデータ転送が可能です。
これらはいずれもコンポーネント化されたアプリケーションを奨励しており、再利用性を向上させるためにアプリケーションを明確な機能を持つモジュールに分割します。
違い：
1) データの流れ
Vue はデフォルトで双方向のデータ バインディングをサポートしていますが、React は常に一方向のデータ フローを推奨してきました。
2) 仮想 DOM
Vue2.xでは「Virtual DOM」の導入が始まり、この点ではReactとの差がなくなりましたが、それでも細部には独自の特徴があります。Vue は、コンポーネント ツリー全体を再レンダリングすることなく、レンダリング プロセス中に各コンポーネントの依存関係を追跡するため、Virtual DOM の差分をより速く計算できると主張しています。
React の場合、アプリケーションの状態が変更されるたびに、すべての子コンポーネントが再レンダリングされます。もちろん、これは PureComponent/ShouldComponentUpdate ライフサイクル メソッドを通じて制御できますが、Vue はこれをデフォルトの最適化として扱います。
3) コンポーネント化
React と Vue の最大の違いは、テンプレートの作成です。
Vue では、通常の HTML に似たテンプレートを作成することが推奨されています。これは標準の HTML 要素に非常によく似て記述されていますが、いくつかの属性が追加されています。
React では、すべてのテンプレートを、一般的な JavaScript 構文拡張機能である JSX で記述することをお勧めします。
具体的には、React の render 関数はクロージャ機能をサポートしているため、インポートされたコンポーネントを render で直接呼び出すことができます。ただし、Vue では、テンプレートで使用したデータをトランジットのためにこれに掛ける必要があるため、コンポーネントをインポートした後、コンポーネント内で再度宣言する必要があります。
4) データ変更監視の実装原則が異なる
Vue は、ゲッター/セッターや一部の関数ハイジャックを通じてデータの変更を正確に認識でき、特別な最適化を行わなくても良好なパフォーマンスを実現できます。
デフォルトでは、React は参照を比較しますが、最適化されていない場合 (PureComponent/ShouldComponentUpdate)、不要な vDOM の再レンダリングが大量に発生する可能性があります。これは、Vue では可変データが使用されるのに対し、React では不変データがより重視されるためです。
5) 高次成分
React は高次コンポーネント (HOC) を通じて拡張できますが、Vue はミックスインを通じて拡張する必要があります。
高階コンポーネントは高階関数であり、React コンポーネント自体は純粋関数であるため、React にとって高階関数は簡単です。逆に、Vue.js は HTML テンプレートを使用してビュー コンポーネントを作成しますが、現時点ではテンプレートを効果的にコンパイルできないため、Vue は HOC を使用して実装できません。
6) ビルドツール
どちらも独自のビルド ツールを持っています。
React ==> React APP を作成する
表示 ==> ビュー-cli
7) クロスプラットフォーム
反応 ==> ネイティブに反応
Vue ==> Weex
12. Vueの利点
軽量フレームワーク: ビュー レイヤーのみに焦点を当てます。これはデータを構築するためのビューのセットであり、サイズはわずか数十 kb です。
学びやすい: 中国語の開発、中国語のドキュメント、言語の壁がなく、理解しやすく、学びやすい。
双方向データ バインディング: Angular の特性を保持し、データ操作がよりシンプルです。コンポーネント化: React の利点を保持し、HTML のカプセル化と再利用を実現し、単一ページ アプリケーションの構築に独自の利点があります。
ビュー、データ、構造の分離: ロジック コードを変更することなく、データの変更が容易になり、関連する操作を完了するためにデータを操作するだけで済みます。
仮想 DOM: DOM 操作は非常にパフォーマンスを重視し、ネイティブ DOM 操作ノードを使用しなくなり、DOM 操作が大幅に解放されます。ただし、特定の操作は依然として DOM ですが、別の方法で行われます。
動作速度が速い：react に比べて仮想 dom も動作し、パフォーマンスの面では vue の方が優れています。