Reactが次のプロジェクトに最適かどうかを判断する方法

Reactコアの概念を簡単に見てください

• 反応とは何ですか？ Reactは、宣言的でコンポーネント化されたアプローチを使用して、データのコンポーネントが変更された後に効率的に更新およびレンダリングするための高速でインタラクティブなユーザーインターフェイスを構築するための人気のある強力なJavaScriptライブラリです。
• 仮想DOMの役割：Reactのコアは仮想DOMであり、これは軽量DOM抽象モデルです。 Reactは仮想DOMを使用してWebページを更新して、DOMの直接操作を避け、パフォーマンスを向上させます。 Virtual DOMは、違いを前後に比較することにより、実際の変更された部分のみを更新します。
Reactのシナリオ：
• Reactは、特に基礎となるデータモデルと同期する必要がある複雑なインタラクティブUIの場合、イベントや頻繁なデータ変更に対する迅速な応答が必要なプロジェクトに最適です。また、州のコンポーネントの管理にも役立ち、コードクラッターを防ぐため、多くの州の管理とDOMの運用を必要とするプロジェクトに最適です。

最新のユーザーは、Webアプリケーションがネイティブアプリケーションのようなスムーズなパフォーマンスと経験を持つことを期待しています。 Webサイトの初めての読み込み時間を短縮するための多くの手法がありますが、インタラクティブなWebアプリケーションでは、ユーザー操作とアプリケーション応答の間の時間遅延も同様に重要です。ネイティブアプリケーションはレスポンシブであり、ネットワーク接続が不十分であっても、Webアプリケーションもそうです。

多くの最新のJavaScriptフレームワークは、この問題を効果的に解決します。 Reactは、Webアプリケーション向けに高速でインタラクティブなユーザーインターフェイスを作成するための最も人気のある強力なJavaScriptライブラリの1つと見なすことができます。

この記事では、次のプロジェクトに適しているかどうかを判断するのに役立つ反応の利点と作業メカニズムを調査します。

反応とは何ですか？

Reactは、ユーザーインターフェイスを構築するためにFacebookが作成したJavaScriptライブラリです。

これは、GitHubに74,000を超える星を持つオープンソースプロジェクトです。

反応機能：

• 宣言：アプリケーションの各状態の簡単なビューを設計するだけで、データの変更に応じて正しいコンポーネントを効率的に更新してレンダリングします。
• コンポーネント化：それぞれが独自の状態を管理する複数のカプセル化されたコンポーネントを組み立てることにより、Reactアプリケーションを作成します。
• 一度学んで、どこにでも書いてください：Reactは完全なフレームワークではなく、ビューをレンダリングするためのライブラリです。

仮想DOMはどのように機能しますか？

仮想DOMは、Reactのユーザーインターフェイス要素とその変更の迅速なレンダリングの中核です。そのメカニズムをより深く理解しましょう。

HTMLドキュメントオブジェクトモデル（DOM）は

です

HTMLおよびXMLドキュメントのプログラミングインターフェイス... DOMは、プロパティとメソッドを使用して、ノードとオブジェクトの構造化されたグループとしてドキュメントの表現を提供します。基本的に、Webページをスクリプトまたはプログラミング言語に接続します。 ——mdn

Webページの一部をプログラム的に変更するときはいつでも、DOMを変更する必要があります。ドキュメントの複雑さとサイズに応じて、特にDOMが変更されたときにブラウザが実行する必要がある作業を検討する場合、ユーザーが受け入れることができるよりもDOMを通過して更新するのに時間がかかる場合があります。実際、DOMが更新されるたびに、ブラウザはCSSを再計算し、Webページでレイアウトと再描画操作を実行する必要があります。

Reactは、開発者がDOMを直接処理することなくWebページを変更できるようにします。これは、仮想DOMによって達成されます。

仮想DOMは、DOMの軽量抽象モデルです。 Reactはレンダリング方法を使用して、Reactコンポーネントからノードツリーを作成し、操作によって引き起こされるデータモデルの変更に基づいてこのツリーを更新します。

Reactアプリの基礎となるデータが変更されるたびに、Reactはユーザーインターフェイスを表現するための新しい仮想DOM表現を作成します。

更新uiは仮想dom ブラウザのDOMを更新するときに、次の手順を大まかに追跡します。

変更が発生するたびに、Virtual Dom表現のUI全体を再レンダーします。

reactは、以前の仮想DOM表現と新しい表現の違いを計算します。
最後に、Reactは実際のDOMに実際に変更されたものをパッチします。変更がなければ、ReactはHTML DOMをまったく処理しません。
3. このプロセスは、仮想DOMの2つの表現をメモリ内に保持し、それらを比較することを含むと考えるかもしれません。効率的なdiffアルゴリズム、バッチDOMの読み取り/書き込み操作、およびdomの変更を最小限に抑える必要があります。

Reactはすべてのプロジェクトに適していますか？

名前が示すように、Reactは超応答性の高いユーザーインターフェイス、つまりイベントやその後のデータ変更に非常に迅速に応答するユーザーインターフェイスを作成するのに適しています。 FacebookエンジニアJordan WalkeのReact Nameが刺激を受けているコメント： このAPIは、状態またはプロパティの変更に反応し、あらゆる形式のデータを処理できます（構造の深さはグラフ自体に似ています）。そのため、名前は適切だと思います。 —Vjeux、「私たちの上位50,000スター」

一部の人々は、すべてのプロジェクトにReactが必要だと考えていますが、基礎となるデータモデルの頻繁な変更と同期して複雑なインタラクティブUIを維持する必要があるWebアプリケーションには良い選択だと思います。

Reactは、ステートフルなコンポーネントを効率的な方法で処理するように設計されています（これは、開発者がコードを最適化する必要がないという意味ではありません）。したがって、この機能の恩恵を受けるプロジェクトは、Reactの理想的な候補と見なすことができます。

Chris Coyierは、反応を使用することが理にかなっている次の相互に関連する状況の概要を説明しています。

• 多くの州の管理およびDOM運用。つまり、ボタンを有効にして無効にし、リンクをアクティブ化し、入力値を変更し、メニューを閉じて展開します。このようなプロジェクトでは、Reactはステートフルコンポーネントの管理をより速く、より簡単にします。 React Routerの共著者であるMichael JacksonがTweetで適切に述べたように：＆gt;鍵は、Reactが私ではなく、実際にどのような変更を行う必要があるかを把握する責任があるということです。これは *非常に貴重な *
です
• コードの混乱を避けてください。 DOMを直接変更することで複雑な状態を追跡すると、少なくともコード組織と構造に特別な注意を払うことなく、コードの混乱につながる可能性があります。

リソース

あなたがReactとその仮想Domがどのように機能するかに興味があるなら、ここにあなたがもっと学ぶことができるいくつかのリソースを紹介します：

• SitePointの統合ReactセンターとのReact Reactを学習します。
Facebookエンジニアからの反応ビデオ
クリスミニックの「React.jsにおける仮想Domの本当の利点」
Bartosz Krajkaの「仮想DOMとDOMの違い」
フランソワザニノットの「反応は遅く、反応は速い：実際には反応アプリケーションを最適化する」
クリス・リーナートの「あなたの会社の正しいフロントエンドフレームワークを選択する方法」

結論

Reactおよびその他の類似のJavaScriptライブラリは、状態の変更に迅速に応答する高速でイベント駆動型ユーザーインターフェイスの開発を簡素化します。 Webアプリケーションとネイティブアプリケーションの間のギャップを埋めるための潜在的な目標を特定できます。ユーザーは、Webアプリケーションがネイティブアプリケーションと同じくらいスムーズでシームレスになることを期待しています。

これは、現代のWeb開発の開発方向です。

Create React App（構成なしでReactアプリを作成するプロジェクト）は、デフォルトでプログレッシブWebアプリケーション（PWAS）を作成する機能を含めることに偶然ではありません。これらのアプリケーションは、サービスワーカーとオフラインの優先キャッシュを利用して、遅延を最小限に抑え、Webアプリケーションがオフラインで動作できるようにします。

React Virtual dom

に関するFAQ

• 反応の仮想DOMとは何ですか？ 仮想Dom（VDOM）は、UIの理想的または「仮想」表​​現がメモリに保持され、ReactDomなどのライブラリによって「実際の」DOMと同期されるプログラミングコンセプトです。このプロセスは調整と呼ばれます。 Reactでは、JSX要素をレンダリングすると、各仮想DOMオブジェクトが更新されます。

• 仮想DOMはどのように機能しますか？ 仮想Domは3つの簡単なステップで動作します。まず、基礎となるデータが変更されるたびに、UI全体が仮想DOM表現で再レンダリングされます。次に、以前のDOM表現と新しい表現の違いが計算されます。最後に、実際のDOMは実際に変更されたもののみを更新します。これは、変更ごとにDOM全体を更新し、パフォーマンスを向上させるよりも効率的です。

• Reactの仮想DOMはパフォーマンスをどのように改善しますか？ Reactの仮想DOMは、DOMを直接操作する回数を最小限に抑えることでパフォーマンスを向上させ、DOMの直接操作はブラウザでの操作が遅いことです。変更が発生するたびにDOM全体を更新する代わりに、Reactは更新する必要があるDOMの部分のみを更新します。これにより、パフォーマンスが大幅に向上します。

• 実際のDOMと仮想DOMの違いは何ですか？ 実際のDOMは、ブラウザ内のWebページの実際の表現であり、仮想DOMはメモリ内のWebページの仮想表現です。 Virtual Domは、変更されるたびにDOM全体を更新するのではなく、変更された実際のDOMパーツのみを更新するため、より高速で効率的です。

• jsxとは何ですか？ JSXはJavaScript XMLの略です。 Facebookが開発したJavaScriptの構文拡張機能であり、JavaScriptにHTML/XMLのようなテキストの存在を可能にします。 JavaScriptコードを含む同じファイルにHTML構造を記述できます。

• 反応でJSXを使用する方法は？ ReactはJSXを使用してDOMの要素をレンダリングします。 JSXを使用すると、JavaScriptでHTML要素を作成し、CreateElement（）および/またはappendChild（）メソッドなしでDOMに配置できます。 JSXはHTMLタグを反応する要素に変換し、ReactでHTMLを書き、追加しやすくします。

• 反応の調整とは何ですか？ 調整は、DOMを更新するReactのプロセスです。コンポーネントの状態が変更された場合、Reactは実際のDOM更新が必要かどうかを判断する必要があります。これは、新しい仮想DOMを作成し、古い仮想DOMと比較することで行います。 Reactは、違いがある場合にのみ実際のDOMを更新します。

• Reactはイベントをどのように処理しますか？ Reactは、W3Cオブジェクトモデルと完全に互換性のある独自のイベントシステムを作成します。 Reactは、アプリケーションとインターフェイスを反応するために一貫性と高性能をもたらす合成イベントシステムを実装します。これは、イベントをドキュメントのルート要素に委任し、対応するコンポーネント要素にマッピングすることで行います。

• 反応におけるコンポーネントの役割は何ですか？ コンポーネントは、任意のReactアプリケーションのビルディングブロックであり、単一のアプリケーションは通常、複数のコンポーネントで構成されています。コンポーネントは、基本的にユーザーインターフェイスの一部です。 UIを別々に処理できる別々の再利用可能な部分に分割します。

• Reactはどのようにフォームを処理しますか？ HTMLでは、通常、Form Elements（、、

以上がReactが次のプロジェクトに最適かどうかを判断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。