React フレームワークでは何ができるのでしょうか? React フレームワークの詳細な紹介 (完全な使用例付き)-jsチュートリアル-php.cn

Reactは、「予測可能な」および「宣言的な」Web ユーザーインターフェイスを構築するための JavaScript フレームワークであり、Facebook が Web アプリケーションをより迅速に開発できるようになりました。記事の内容を見てみましょう

1. 特徴:

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

2. 宣言的データが変更されると、React は概念的には F5 をクリックするのと同じです。実際には、変更の一部のみが更新されます。 React は再利用可能なコンポーネントを構築することを目的としています。実際、React ではコンポーネントを構築するだけです。カプセル化により、コンポーネントコードの再利用、テスト、懸念事項の分離が容易になります。追加に、次のポイントがあります。

従来の Web アプリケーションでは、DOM 操作は通常直接更新されますが、DOM の更新には通常比較的コストがかかることがわかっています。 DOM に対する操作をできる限り減らすために、React は直接 DOM 操作を行う代わりに、DOM を更新するための別の強力な方法を提供します。これは、軽量の仮想 DOM である

Virtual DOMであり、React によって抽象化されたオブジェクトであり、DOM がどのように見えるべきか、どのように表示されるべきかを記述します。実ＤＯＭはこの仮想ＤＯＭを介して更新され、この仮想ＤＯＭが実ＤＯＭの更新を管理する。

なぜこの追加レイヤーの仮想 DOM 操作により高速化できるのでしょうか? これは、React には diff アルゴリズムがあり、仮想 DOM を更新しても実際の DOM がすぐに影響を受けるとは限りません。React はイベントループが終了するまで待機し、この diff アルゴリズムを使用して現在の新しい DOM を比較して最小値を計算します。以前の DOM 表現を使用して実際の DOM を更新する手順。

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

DOM ツリー内のノードは要素と呼ばれますが、ここでは Virtual DOM ではコンポーネントと呼ばれます。 Virtual DOM のノードは、コンポーネントで構成される完全な抽象コンポーネントです。注: コンポーネントの存在により DOM diff の計算がより効率的に行われるため、React ではコンポーネントの使用が非常に重要です。

State と Render

React が実際の DOM を表示する方法、コンポーネントをレンダリングする方法、いつレンダリングするか、同期的に更新する方法については、State と Render について簡単に理解する必要があります。 state 属性には、コンポーネントを定義するために必要なデータが含まれています。データが変更されると、再レンダリングするために Render が呼び出されます。ここで、データは提供された setState メソッドを通じてのみ更新できます

公式 Web サイトのデモを見てみましょう。最初:

ログイン後にコピー

非常に簡単です。サーバーからアクセスすると、「Hello, world!」という文字が表示されます。JSXTransformer.js は、JSX 構文の解析をサポートしています。JSX は、JavaScript で HTML コードを記述することができる構文です。それが気に入らない場合は、React はネイティブ JavaScript メソッドも提供します。(さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual 列にアクセスして学習してください)

別のデモ:

Hello React

ログイン後にコピー

効果:

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

React ユーザーマニュアル

列にアクセスして学習してください)。以下のメッセージ。

以上がReact フレームワークでは何ができるのでしょうか? React フレームワークの詳細な紹介 (完全な使用例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。