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

この記事では、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 アルゴリズムを使用する必要があります。

この li のキー値が設定されていない場合、リストが更新されるときにパフォーマンスの問題が発生します。 React はこのリストをあまり効率的に更新できません

コンポーネント コンポーネント

DOM ツリー内のノードは要素と呼ばれますが、ここでは Virtual DOM ではコンポーネントと呼ばれます。 Virtual DOM のノードは、コンポーネントで構成される完全な抽象コンポーネントです。

React ではコンポーネントの使用が非常に重要です。コンポーネントの存在によって DOM diff の計算がより効率的に行われるからです。

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

以上がなぜReactが登場したのか？ React登場の歴史的背景を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。