React と Webpack の違いは何ですか

違い: 1. React は JavaScript フレームワークであるのに対し、webpack は JavaScript アプリケーション用の静的モジュール パッケージャーです; 2. React は主にユーザー インターフェイスの構築に使用されますが、webpack はリロードおよびコンパイルしてすべての静的モジュールをコンパイルできます。リソースがマージされるため、IO リクエストが削減されます。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react とは

React は、ユーザー インターフェイスを構築するための JavaScript フレームワークです。

フレームワーク: 再利用できるコード。より多くの人がそれを使用するほど、それはより有名になり、より多くの人がそれを使用するほど、それはより価値があります。 (笑)

Angular は React と同じくらい有名です。

React は UI のレンダリングに使用される JS ライブラリであり、UI 実装として位置づけられています

React Web App ソリューションであり、派生した React Native はクロススクリーン アプリ ソリューションです

機能:

• 宣言型設計: 宣言型パラダイム

• 効率的: VDOM を使用して DOM インタラクションを削減

• 柔軟性: 既知のライブラリやフレームワークとうまく連携します

• JSX: JS の欠点の多くを解決しようとする独立言語で、ES6 にはほぼすべての JSX 機能が含まれています

• コンポーネント: コードの再利用

• 一方向応答データ フロー: 双方向バインディングよりもシンプルかつ高速です。

React を使用する理由

従来の方法では DOM を頻繁に操作しますが、パフォーマンスが要件を満たしていません。React はパフォーマンスの高い VDOM を使用します。

従来の JS コードの保守コストは高く、React はコンポーネント開発に基づいています

#モバイル開発をサポートする必要があります

React の欠点:

• JS や jQuery を使用してきた従来のフロントエンドにとって、React は非常に不親切です

• React はコンポーネントと状態の管理を重視しており、その世界観はプログラミング言語を重視した

• Vue.js はビューの自動同期を重視しており、その世界観は UI スクリプトを重視した

• 学習コストReact のパフォーマンスは Vue.js のパフォーマンスよりも高いです。

• #React にはファミリー バケットがなく、UI のみを実行します。

webpack とは

本質的に、

webpack は、最新の JavaScript アプリケーション用の静的モジュール バンドラー (モジュール バンドラー) です。 Webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。

Webpack は生産ラインのようなもので、ソース ファイルを出力結果に変換する前に、一連の処理プロセスを経る必要があります。この生産ラインの各処理工程は単一の責任を持ち、複数の工程間には依存関係があり、現在の処理が完了して初めて次の工程に引き継がれて処理されます。プラグインは、生産ラインに挿入される機能のようなもので、特定の時間に生産ライン上のリソースを処理します。

Webpack は、Tapable を使用して、この複雑な生産ラインを組織します。 Webpack は実行プロセス中にイベントをブロードキャストします。プラグインは対象のイベントをリッスンするだけでよく、生産ラインに参加して生産ラインの動作を変更できます。 Webpack のイベント フロー メカニズムにより、プラグインの順序性が確保され、システム全体が非常にスケーラブルになります。

#webpack ビルド プロセス

#Webpack の実行プロセスはシリアル プロセスであり、次のプロセスが最初から最後まで実行されます:

##初期化パラメータ: 構成ファイルとシェル ステートメントからパラメータを読み取ってマージし、最終的なパラメータを取得します。

• コンパイルの開始: 前の手順で取得したパラメーターを使用して Compiler オブジェクトを初期化し、構成されているすべてのプラグインをロードし、オブジェクトの run メソッドを実行してコンパイルを開始します。

• エントリの決定: 構成内のエントリに従って、すべてのエントリ ファイルを検索します。

• モジュールをコンパイルします。エントリ ファイルから開始して、構成されたすべてのローダーを呼び出してモジュールを変換し、モジュールが依存するモジュールを見つけて、すべてのローダーが依存するまでこのステップを繰り返します。エントリ依存ファイルはこのステップに渡されます。

• モジュールのコンパイルを完了する: ステップ 4 でローダーを使用してすべてのモジュールを翻訳した後、各モジュールの最終的に翻訳されたコンテンツとモジュール間の依存関係が取得されます。

• 出力リソース: エントリとモジュール間の依存関係に従って、複数のモジュールを含むチャンクにアセンブルし、各チャンクを別のファイルに変換して出力リストに追加します。 , このステップは、出力コンテンツを変更する最後の機会です。

• 出力完了：出力内容が決定したら、設定に従って出力パスとファイル名を決定し、ファイル内容をファイルシステムに書き込みます。

• 上記のプロセスでは、Webpack は特定の時点で特定のイベントをブロードキャストします。プラグインは、対象のイベントをリッスンした後、特定のロジックを実行します。 call Webpack Webpack の実行結果を変更する API を提供します。

react と webpack の違い

React は JavaScript フレームワークであり、UI のレンダリングとユーザー インターフェイスの構築に使用される JS ライブラリです。

Webpack は、複数の js ファイルを 1 つのファイルにパッケージ化できるバンドラーです (実際には、js ファイルだけでなく、css ファイル、json ファイルなど、他の種類のファイルもパッケージ化できます)。

webpack の役割

• リロードしてコンパイルします。実際に行うことは、ブラウザが認識しない構文をブラウザが認識できる構文にコンパイルすることです。たとえば、less は css にコンパイルされ、ES6 の構文は ES5 に変換されます。

• IO リクエストを削減します。通常、リクエストを行った後、ブラウザに HTML を返します。このとき、コンソールを開くと、HTML ページ内の script、link、その他のタグを通じて参照されている静的リソースが見つかり、ブラウザーはこれらのリソースを取得するために別のリクエストを行います。ただし、webpack のパッケージ化ではすべての静的リソースがマージされ、IO リクエストが削減されます。

[関連する推奨事項: Redis ビデオ チュートリアル ]

以上がReact と Webpack の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。