Reactコアの概念を簡(jiǎn)単に見てください

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

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

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

この記事では、次のプロジェクトに適しているかどうかを判斷するのに役立つ反応の利點(diǎn)と作業(yè)メカニズムを調(diào)査します。

反応とは何ですか？

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

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

反応機(jī)能：

• 宣言：アプリケーションの各狀態(tài)の簡(jiǎn)単なビューを設(shè)計(jì)するだけで、データの変更に応じて正しいコンポーネントを効率的に更新してレンダリングします。
• コンポーネント化：それぞれが獨(dú)自の狀態(tài)を管理する複數(shù)のカプセル化されたコンポーネントを組み立てることにより、Reactアプリケーションを作成します。
• 一度學(xué)んで、どこにでも書いてください：Reactは完全なフレームワークではなく、ビューをレンダリングするためのライブラリです。

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

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

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

です

HTMLおよびX(jué)MLドキュメントのプログラミングインターフェイス... DOMは、プロパティとメソッドを使用して、ノードとオブジェクトの構(gòu)造化されたグループとしてドキュメントの表現(xiàn)を提供します?；镜膜?、Webページをスクリプトまたはプログラミング言語(yǔ)に接続します。 ——mdn

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

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

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

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

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

変更が発生するたびに、Virtual Dom表現(xiàn)のUI全體を再レンダーします。

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

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

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

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

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

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

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

リソース

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

• SitePointの統(tǒng)合ReactセンターとのReact Reactを?qū)W習(xí)します。
Facebookエンジニアからの反応ビデオ
クリスミニックの「React.jsにおける仮想Domの本當(dāng)の利點(diǎn)」
Bartosz Krajkaの「仮想DOMとDOMの違い」
フランソワザニノットの「反応は遅く、反応は速い：実際には反応アプリケーションを最適化する」
クリス?リーナートの「あなたの會(huì)社の正しいフロントエンドフレームワークを選択する方法」

結(jié)論

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

これは、現(xiàn)代のWeb開発の開発方向です。

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

React Virtual dom

に関するFAQ

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

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

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

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

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

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

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

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

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

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

以上がReactが次のプロジェクトに最適かどうかを判斷する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。