React の最初の紹介

高洛峰オリジナル: 2016-11-15 15:09:591317ブラウズ

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 の最初の紹介