なぜReactが登場したのか？ React登場の歴史的背景を紹介-jsチュートリアル-php.cn

この記事では、reactが誕生した理由、reactが登場した理由、reactの歴史的背景などを中心に解説しています。それでは、この記事を一緒に見ていきましょう

React誕生の理由

React は Facebook によって開発された JS ライブラリですが、なぜ Facebook は React を作成したのでしょうか?
Facebook は、MVC は非常に大規模なコードベースと巨大な組織のため、拡張のニーズを満たすことができないと考えており、新しい機能を追加する必要があるたびに、システムの複雑さが急激に増大します。コードが脆弱で予測不可能になり、その結果、MVC がバラバラになってしまいました。 MVCは大規模なアプリケーションには向かないと思います。システム内に多くのモデルと対応するビューがある場合、その複雑さは急速に拡大し、特にモデルとビューの間に双方向のデータフローが存在する可能性があるため、理解とデバッグが非常に困難になります。

この問題を解決するには、「より予測しやすくするために何らかの方法でコードを整理する」ことが必要ですが、これは Flux と React によって達成されています

Flux は、アプリケーション内での一方向のデータフローを促進するために使用されるシステムアーキテクチャです。「予測可能な」宣言型の「Web ユーザーインターフェイス」を構築するための JavaScript フレームワークである React により、Facebook は Web アプリケーションをより迅速に開発できるようになりました。

主に React の問題について議論します:
React はどのような問題を解決するために使用されますか? 公式 Web サイトには次のように書かれています:

時間の経過とともに変化するデータを使用して大規模なアプリケーションを構築するという 1 つの問題を解決するために React を構築します。データが時間の経過とともに変化する大規模なアプリケーションを構築する場合、React には主に次の機能があります:

1. 任意の時点でアプリケーションがどうあるべきかを記述するだけで、データが更新されたときに React が UI インターフェイスを自動的に管理します。時間が変わります

2. データが変更されると、React は実際には変更の一部のみを更新します

React は再利用可能なコンポーネントを構築することを目的としています。実際、React を使用するときはコンポーネントを構築するだけではありません。カプセル化により、コードの再利用、テスト、懸念事項の分離が容易になります。

React 公式 Web サイトから、「なぜ React を構築したのか?」を通じて React ドキュメントを作成する 4 つの理由について学びました:
1. React は MVC フレームワークではなく、React はコンポーザブルユーザーインターフェイスを構築するためのライブラリです。これにより、時間の経過とともにデータを変更する再利用可能な UI コンポーネントの作成が促進されます。
2. React はテンプレートを使用しません

従来、Web アプリケーションの UI はテンプレートまたは HTML 命令を使用して構築されていました。これらのテンプレートは、UI を構築できる完全な抽象化セットを指定します。違いは、React がユーザーインターフェースをコンポーネントに分割して構築することです。これは、React が実際のフル機能のプログラミング言語を使用してビューをレンダリングすることを意味します。

3. 応答性の高い更新は非常に簡単です
従来の JS アプリケーションでは、データの変更を考慮し、DOM に変更を加えて最新の状態に保つように指示する必要があります。 AngularJS でも、ディレクティブとデータバインディングを介して、関連する関数に DOM ノードを手動で更新するよう要求する宣言型インターフェイスが提供されています。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
React リファレンスマニュアル
の列にアクセスして学習してください)

React は、コンポーネントが初めて初期化されるときに、レンダリングメソッドが呼び出されて生成を試みます。軽快なパフォーマンス。この表現では、タグ文字列が生成され、ドキュメントに挿入されます。データが変更されると、render メソッドが再度呼び出されます。可能な限り効率的に更新を完了するために、レンダー呼び出しによって返された値と新しい値を比較し、適用された DOM に最小限の変更を加えます。

render によって返されるデータは文字列でも DOM ノードでもありません。これは、DOM がどのように見えるべきかを記述する軽量のタイプです。

4. HTML5 はほんの始まりにすぎません
React には独自の軽量ドキュメント表現があるため、これを使用していくつかの優れたことができます
1. Facebook の動的テーブルはレンダリングを通じて HTML を置き換えることができます
2.ページの Web アプリケーションは、完全に React と Backbone.Router を使用して構築されています。デザイナーは、通常どおり JSX を使用して React コードを作成できます。
3. Web ワークステーション上で React を実行する内部プロトタイプアプリケーションを構築し、React を使用して Objective-C ブリッジ経由でネイティブ iOS ビューを駆動しました。

4. サーバー上で React を実行できるため、SEO、パフォーマンス、コード共有、プロジェクトの柔軟性が向上します。

5. イベントはすべての最新ブラウザ (IE8 を含む) で一貫性があり、標準化されており、イベント委任が自動的に使用されます。

React の主な原則

仮想 DOM と仮想 DOM
従来の Web アプリケーションでは、DOM 操作は通常直接更新されますが、DOM の更新には通常比較的コストがかかることがわかっています。 DOM に対する操作をできるだけ減らすために、React は DOM を直接操作する代わりに、DOM を更新するための別の強力な方法を提供します。これは Virtual DOM、つまり軽量の仮想 DOM であり、React によって抽象化されたオブジェクトであり、DOM がどのように見えるべきか、どのように表示されるべきかを記述します。この仮想 DOM を使用して、より実際の DOM を更新し、この仮想 DOM が実際の DOM の更新を管理します。
この追加レイヤーの仮想 DOM 操作により高速化できるのはなぜですか? これは、React には diff アルゴリズムがあり、仮想 DOM を更新しても実際の DOM がすぐに影響を受けるとは限りません。React はイベントループが終了するまで待機し、この diff アルゴリズムを使用して現在の新しい DOM を比較して最小値を計算します。実際の DOM を更新する手順。

React Diff

1. 仮想 DOM は、実際に変更されるインターフェイスの部分に対してのみ実際の DOM 操作が実行されるようにします。
Web ページは DOM ツリーで構成されており、その一部が変更されると、それは実際には特定の DOM ノードの変更に対応します。 React では、UI インターフェイスを構築するという考え方は、現在の状態に基づいてインターフェイスを決定することです。前後の 2 つの状態は 2 つのインターフェイスに対応し、react は 2 つのインターフェイス間の差異を比較します。
Facebook のエンジニアは、Web インターフェイスについて 2 つの単純な仮定を立て、Diff アルゴリズムの複雑さを直接 O(n) に削減しました
1。 2 つの同一のコンポーネントは同様の DOM 構造を生成し、異なるコンポーネントは異なる DOM 構造を生成します
2。同じレベルの子ノードのグループは、一意の ID で区別できます

ノードの同じ位置の前後に異なる種類のノードが出力されます。React は前のノードを直接削除し、新しいノードを作成して挿入します。ノードを削除すると、そのノードが完全に破棄されます。削除されたノードの下に子ノードがある場合、これらの子ノードも完全に削除され、後でユーザーによって比較されることはありません

React が同じ場所で異なるノードに遭遇した場合。コンポーネントを作成する場合、最初のコンポーネントは単純に破棄され、新しく作成されたコンポーネントが追加されます。通常、コンポーネントごとに異なる DOM 構造が生成されます。それらの構造を比較することに時間を費やすよりも、基本的には新しいコンポーネントを作成する方が良いでしょう。

2. レベルごとにノードを比較する
React では、2 つのツリーは同じレベルのノードのみを比較します。同じノードレベルで以前のツリーと変更されたツリーを比較します。React は、同じ親ノードの下にあるすべての子ノードを比較します。ノードが存在しないことが判明した場合、そのノードとその子ノードは完全に削除され、それ以上の比較は実行されないため、ツリーを一度走査する限り、DOM 構造の比較を完了できます。。

React は、同じレイヤー上のノードの位置の変換のみを考慮し、異なるレイヤー上のノードの単純な削除と作成のみを考慮します。ルートノードは、子ノードの A が欠落していることを検出すると、A を直接破棄し、D がもう 1 つ子ノードがあることを検出すると、A を子ノードとして作成します。

パフォーマンスの向上に役立つ安定した構造を維持するために、実際に DOM ノードを削除または追加する代わりに、CSS を使用してノードを非表示または表示できます。

同じタイプのノードの場合、アルゴリズムは比較的単純で、React はそのプロパティをリセットしてノード変換を実現します。
例:
renderA:

renderB:

仮想 DOM の style 属性は少し異なり、その値は単純な文字列ではなく、オブジェクトである必要があります。

3. リストノードの比較:
React は、同じレイヤー上にないノードを破棄して再作成します。それらが同じレイヤー上にある場合でも、リストノードの Diff アルゴリズムを使用する必要があります。

なぜReactが登場したのか？ React登場の歴史的背景を紹介