React フレームワークはいつ登場しましたか?

React フレームワークは 2013 年に登場しました。React は Facebook の内部プロジェクトから生まれ、2013 年 5 月にオープンソース化されました。 React は、ユーザー インターフェイスの構築に使用される JavaScript ライブラリで、主に UI の構築に使用されます。ユーザーは、UI のレンダリングに役立つ宣言コード、静的な HTML DOM 要素、動的変数の受け渡し、さらにはインタラクティブなパラメーターなど、React でさまざまなタイプのパラメーターを渡すことができます。アプリケーションコンポーネント。

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

1. React の起源と開発

React は、ユーザー インターフェイスの構築に使用される JavaScript ライブラリであり、Facebook の内部プロジェクトから生まれました。同社は市場に出回っているすべての JavaScript MVC フレームワークに不満を抱いていたため、独自のフレームワークを作成して Instagram Web サイトを構築することにしました。作ってみてこのセットがとても便利だったので、2013年5月にオープンソース化しました。

2. React

HTML ベースのフロントエンド インターフェイス開発の出発点はますます複雑になり、その本質的な問題は基本的には、サーバーからの動的データやユーザー入力を複雑なユーザー インターフェイスに効率的に反映する方法に焦点を当てています。 Fackbook の React フレームワークは、完全にこの問題を指向したソリューションであり、公式 Web サイトの説明によると、その出発点は次のとおりです: 時間の経過とともに変化するデータを使用して大規模なアプリケーションを開発するために使用されます (時間の経過とともに変化するデータを使用して大規模なアプリケーションを構築する)。従来のフロントエンド開発と比較して、React は、フロントエンド インターフェイスの高性能かつ効率的な開発を実現するための、まったく代替的なアプローチを切り開きました。

React は主に UI の構築に使用されます。 React では、UI、静的 HTML DOM 要素、動的変数、さらにはインタラクティブなアプリケーション コンポーネントのレンダリングに役立つ宣言コードなど、さまざまなタイプのパラメーターを渡すことができます。

3. Recat と従来の MVC の関係

軽量ビュー レイヤー ライブラリ!ユーザー インターフェイスを構築するための JavaScript ライブラリです。

React は完全な MVC フレームワークではありません。せいぜい MVC の (ビュー) 層と考えることができます。React ですら MVC 開発モデルを完全には認識していません。React は、ページ UI を構築するためのライブラリ。 React はインターフェースを独立した小さなブロックに分割していることが簡単に理解できます。各ブロックはコンポーネントです。これらのコンポーネントを組み合わせたりネストしたりして、ページを作成できます

# #4. React の高機能の反映パフォーマンス: 仮想 DOM

原則: 開発プロセスでは、予測できないデータをリアルタイムで UI に反映する必要があり、このとき DOM を操作する必要があります。ただし、DOM を頻繁に操作したり複雑に操作したりすると、多くのパフォーマンス上の問題が発生します。 ——通常、高パフォーマンスの複雑な DOM 操作を実行する方法は、フロントエンド開発者のスキルを示す重要な指標です。

React では、このために仮想 DOM (仮想 DOM) メカニズムを導入しています。一連の DOM API は、JavaScript を使用してブラウザ側に実装されます。 React に基づいて開発する場合、すべての DOM 構築は仮想 DOM を通じて実行されます。データが変更されるたびに、React は DOM ツリー全体を再レンダリングします。その後、React は現在の DOM ツリー全体と以前の DOM ツリーを比較して DOM 構造を取得します。を選択すると、変更が必要な部分のみが実際のブラウザ DOM 更新を実行します。さらに、React は仮想 DOM の更新をバッチで処理できます。イベント ループ内の 2 つのデータ変更はマージされます。たとえば、ノードの内容を A-B、B-A と継続的に変更すると、React は A が B になり、その後再び変更されると認識します。 B から A への UI の変更はなく、手動で制御する場合、このロジックは通常非常に複雑になります

React Fiber:

React16 A 反応後にリリースコア アルゴリズム、React Fiber はコア アルゴリズムを再実装したものです (公式 Web サイトの声明)。 diff アルゴリズムは以前に使用されていました。

以前の React では、更新プロセスが同期的であったため、パフォーマンスの問題が発生する可能性がありました。

React がコンポーネント ツリーの読み込みまたは更新を決定すると、各コンポーネントのライフサイクル関数の呼び出し、仮想 DOM の計算と比較、最後に DOM ツリーの更新など、多くのことを実行します。このプロセス全体は同時に実行されます。つまり、ロードまたは更新プロセスが開始される限り、途中で中断されることはありません。 JavaScript はシングルスレッドの性質があるため、コンポーネント ツリーが非常に大きく、各同期タスクに時間がかかりすぎる場合、遅延が発生します。

React Fiber のメソッドは実際には非常にシンプルで、シャーディングです。長いタスクを多くの小さな部分に分割します。各小さな部分の処理時間は非常に短くなります。合計時間は依然として非常に長くなりますが、各小さな部分が実行された後、他のタスクに実行の機会が与えられるため、唯一のスレッドが実行されます。排他的ではなくなり、他のタスクも実行する機会が残ります。

5. React の特徴と利点

1. 仮想 DOM

以前は運用していましたDOM メソッドは document.getElementById() を介して行われます。このプロセスは実際には、まず HTML の dom 構造を読み取り、その構造を変数に変換し、その後操作を実行します。

Reactjs は一連の dom モデルを変数の形式で定義します。すべての操作と変換は変数内で直接行われます。これにより、実際の dom を操作する必要性が減り、パフォーマンスが非常に高くなります。主流の MVC フレームワークであり、dom とは同じではありません Dealing

2. コンポーネント システム

React の中心的な考え方は、ページ上の任意の領域または要素コンポーネントと見なすことができます

では、コンポーネントとは何でしょうか?

コンポーネントは、html、css、js、および image 要素を同時に含む集合体を指します

3. 一方向のデータ フロー

実際、reactjs の中核となるコンテンツはデータ バインディングです。いわゆるデータ バインディングとは、サーバー側のデータの一部がフロントエンド ページにバインドされている限り、開発者はビジネスの実現にのみ集中する必要があることを意味します。

4. JSX 構文

vue では、テンプレートの検索とコンパイルのプロセスが次のとおりであるため、render 関数を使用してコンポーネントの dom 構造をより高いパフォーマンスで構築します。省略しましたが、createElement を使用してレンダリングで構造体を作成すると、コードは読みやすくなります。パフォーマンスが低く、負荷が比較的高くなります。現時点では、JSX 構文を使用してレンダリングで dom を作成でき、この問題は解決されますが、前提として、jsx

をコンパイルするツールを使用する必要があるということです。[関連する推奨事項: Redis ビデオ チュートリアル、プログラミング ビデオ]

以上がReact フレームワークはいつ登場しましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。