反応する
インタラクティブユーザーインターフェイス用のJavaScriptライブラリをすばやく作成、2011年にFacebookをリリース
ライブラリとフレームワークの2つの概念の違い
- ライブラリ（ライブラリ）：小さくて賢い、特定のAPIのみを提供します。利点は、「ボートは小さく、向きを変えるのに適している」ということです。あるライブラリから別のライブラリに簡単に切り替えることができますが、コードの機会は変わりません
- フレームワーク（フレームワーク）：大きくて完全なフレームワークです。フレームワークはソリューションの完全なセットを提供するため、プロジェクト内の別のフレームワークに切り替える場合は、さらに困難になります。
3つのフレームワークのステータス
- Angular.js：以前のフロントエンドフレームワークが登場し、学習曲線が急になり、NGIを学ぶのがより困難になりました。NG2からNG5まで、一連の改革が行われ、コンポーネント開発のコンセプトも提供されました。NG2から始まり、使用もサポートされていますTS（TypeScript）開発。
- Vue.js：最もホットなフロントエンドフレームワーク、彼は中国人によって開発されました。私たちにとって、ドキュメントは比較的フレンドリーです。
- React.js：優れたデザインのため、最も人気のあるフレームワーク。
React vs. Vue
コンポーネント化
- モジュール性：コードの観点から分析されます。一部の再利用可能なコードは単一のモジュールに分離されているため、プロジェクトのメンテナンスや開発に便利です。
- コンポーネント化：UIインターフェイスの観点から分析し、再利用可能なUI要素を個別のコンポーネントに抽出します。これは、プロジェクトのメンテナンスと開発に便利です。
- コンポーネント化の利点：プロジェクトの規模が大きくなるにつれて、手元にあるコンポーネントが増え、既存のコンポーネントを完全なページに簡単に接合できます。
- Vueのコンポーネント化を実現する方法：.vueファイルを使用して対応するコンポーネントを作成する
- テンプレート構造
- スクリプトの動作
- スタイル
- Reactがコンポーネント化を実装する方法：Reactにはコンポーネント化の概念がありますが、Vueのようなテンプレートファイルはなく、ReactのすべてがJSで実装されています。
開発チーム
- ReactはFaceBookの公式のフロントエンドチームによって保守および更新されているため、Reactの保守開発チームには強力な技術力があります。
- Vue 1.xは主に作者Youdaによって特別にメンテナンスされています。2.xバージョンに更新されると、関連する開発とメンテナンスを実行するためにYoudaが率いる小さなオープンソースチームも存在します。
コミュニティー
- コミュニティに関して言えば、Reactはその誕生のために比較的早いので、コミュニティは比較的強く、いくつかの一般的な問題に対する最適なソリューションは、コミュニティで簡単に見つけることができます。
- VueコミュニティーはReactよりも小さいですが、いくつかの一般的な問題に対する最良の解決策はコミュニティーでも見つけることができます。
モバイルアプリ開発経験
- VueとWeexを組み合わせると、モバイルアプリ開発への移行のエクスペリエンスが提供されます。
- ReactとReactNativeを組み合わせることで、モバイルアプリ開発エクスペリエンスへのシームレスな移行も可能になります。
Reactを学ぶ理由
- Angularと比較すると、Reactの設計は優れており、すべてがJSに与えられ、コンポーネント開発のアイデアが実現されます。
- 開発チームは非常に強力なので、状況の変化を心配する必要はありません。
- コミュニティは強力で、多くの問題が対応する解決策を見つけることができます。
- ReactNativeにシームレスに移行する開発エクスペリエンスを提供します。
DOMと仮想DOM
-
JUDGMENT
- ブラウザで提供される概念：JSオブジェクトを使用してページ上の要素を表現し、要素を操作するためのAPIを提案する
-
仮想DOM
- フレームワークのコンセプトです：JSオブジェクトを手動で使用してDOM要素とネスト関係をシミュレートします
- 必須：JSオブジェクトを使用してDOM要素とネスト関係をシミュレートする
- 目的：ページ要素の効率的な更新を実現する
差分アルゴリズム
- tree diff：新旧のDOMツリー。レイヤーごとの比較プロセスはTree Diffです。DOM全体がレイヤーごとに比較されると、オンデマンドで更新する必要のあるすべての要素が見つかります。
- コンポーネント比較：ツリー比較を実行する場合、各レイヤーのコンポーネントレベルの比較はコンポーネント比較と呼ばれます。
- 比較前後のコンポーネントのタイプが同じである場合、叔父はこのコンポーネントを更新する必要はないと考えています。
- 比較の前後でコンポーネントのタイプが異なる場合は、古いコンポーネントを削除し、新しいコンポーネントを作成して、ページに追加する必要があります。
- element diff：コンポーネントを比較するときに、2つのコンポーネントが同じタイプの場合、Element Diffと呼ばれる要素レベルの比較を実行する必要があります。