React の最初の紹介-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

React の最初の紹介

高洛峰

Nov 15, 2016 pm 03:09 PM

React に初めて会ったとき

2015 年にオフラインイベントに参加し、React という言葉を初めて聞いたのを漠然と覚えています。当時の講演者は Guo Dafeng で、ember、angular、react についてのパフォーマンス比較ビデオを再生しました。 .js カンファレンス 2015。当時、私は主に angularjs の開発に携わっており、ページが複雑な場合の angular のパフォーマンスの問題をよく知っていました。このビデオでパフォーマンスの比較を見て、すぐに React に感銘を受けました。一緒に React を復習しましょう~

View ライブラリ

React は、AngularJS や Backbone などの MVC フレームワークとは異なり、ユーザーインターフェイスを構築するために Facebook によって開始された Javascript ライブラリです (つまり、MVC の V)。 . ) は、フロントエンドの再利用可能な UI コンポーネントを構築するためのライブラリです。同時に、データが変更されると、React は対応するコンポーネントをタイムリーかつ効果的に更新してレンダリングします。ますます複雑化するフロントエンドインターフェイス、特にデータが常に変化する Web アプリケーションの場合、React は変化するデータをページ上で効率的かつ正確に反映できます。

ビューステートマシン

従来の Web アプリケーションでは、データが変更されると、DOM ノードの変更を同期する必要があります。React はインターフェイスをステートマシンとして扱います:

UI = f(states)

インターフェイスの状態が変化すると、 React は、指定された状態に応じて対応するコンポーネントを迅速かつ効果的に更新してレンダリングします。同じ状態のレンダリングパフォーマンスは一貫しています。

JSX

従来の Web アプリケーションでは、テンプレートまたは HTML 命令を使用してユーザーインターフェイスを構築しますが、React は JSX (ECMAScript を拡張した XML に似た構文) の宣言的記述方法を使用します。これには、テンプレートよりも優れた利点があります。柔軟で拡張性の高いプログラミング言語

は、ページのマークアップ言語とビューのロジックを統合し、ビューの拡張と保守を容易にします

文字列の結合を行わずに、ビューのコンテンツはJavaScriptに統合され、XSS脆弱性の存在を軽減します

効率的な更新

アプリケーションの状態が変化すると、React はコンポーネントとインターフェイスを効率的に更新してレンダリングできます:

仮想 DOM: メモリ内の軽量記述オブジェクトを使用して、JavaScript を通じて実際の DOM ノードの構造とスタイルを表現します

相違点定量的アルゴリズム: 最小セットを生成します効率的かつ迅速に Diff ツリーを生成します

バッチ更新: 状態の複数の更新を 1 つの更新操作に効果的にマージします

React は仮想 DOM を使用して実際の DOM を記述します。アプリケーションの状態が変化すると、最小セットの差分ツリーが生成されます。効率的な差分アルゴリズムを使用し、複数の更新操作が 1 つにマージされるため、実際の DOM に対する直接操作が減り、パフォーマンスが大幅に向上します。

イベントプロキシ

React はイベントプロキシメカニズムを使用しており、イベントバブリングの一貫性を維持したり、ブラウザー間で実行したり、IE8 で HTML5 イベントを使用したりすることもできます。 React は「合成イベント」レイヤーを実装しており、これにより、IE と W3C 標準実装の間の互換性の問題が解消されます。JSX を介してバインドされたイベントは、「合成イベント」にバインドされます。「合成イベント」はイベント委任を通じてコンポーネントの最上位層にバインドされ、バインドされたイベントはコンポーネントがアンロードされるときに自動的に破棄されます。

Flux 一方向フロー

Flux は Facebook によって開始されたアプリケーションアーキテクチャであり、一方向のデータフローを提唱しています:

React の最初の紹介

。

MV* と Flux アプリケーションアーキテクチャの下でのデータフロー図を見てみましょう:

MV*

React の最初の紹介

Flux

React の最初の紹介

上の図から、Flux の一方向データフローにより、アプリケーションのステータスが予測可能で追跡可能になり、次の目標を簡単に達成できます:

簡単なテスト容易性、再現性

タイムトラベルに基づく診断デバッグ

元に戻す機能と再生機能

同型/ユニバーサル

React機能サーバー上で実行して達成しますSEO の最適化、エクスペリエンスの最適化、パフォーマンスの最適化などの目的と同時に、React を一度学習するだけで、Web、モバイル、VR、その他のアプリケーションの作成に使用できます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles