jsx - ReactJS にコンパイルが必要な理由

okwaves2024-01-25  8

Reactjs は .js ファイルで構成されており、JavaScript はインタープリタ言語であるためコンパイルできません。では、なぜ Reactjs をコンパイルする必要があるのでしょうか? JSX コンパイラを使用していると読みました。



------------------------

JSX には、有効な JavaScript ではないマークアップ構文が含まれています。 JSX「コンパイラ」マークアップをバニラの JavaScript に変換します。これは、babel repl を使用して自分で確認できます。

JSX の場所:

const Test = () => <div>test</div>

JavaScript の出力:

"use strict";

var Test = function Test() {
  return /*#__PURE__*/React.createElement("div", null, "test");
};

バンドル、インポートの解決、ポリフィルの追加などの問題もあります。

1

2

これをサポートし、babel repl を参照する

– DevLoverUmar

2020 年 9 月 4 日 18:39



------------------------

これは一種の最小化を経て、ストック以外のすべての JavaScript JSX コードを通常の JavaScript に変換します。 C をマシンコードにコンパイルするなど、実際には速度が向上するわけではありませんが、ブラウザが理解できる Javascript に変換されます。

3

コードを縮小すると実際に読み込み時間が短縮されると私は主張します

– jmm

2020 年 9 月 4 日 18:31

2

サイズは小さくなりますが、動作が速くなることはありません。

– レイ

2020 年 9 月 4 日 18:36

@jmm それは潜在的に真実です。ファイルサイズも小さくなるので、データ的には若干優れていると思われます。実際のパフォーマンス時間に関しては、それが良いか悪いかはわかりません。私は、縮小のプロセスや、さまざまなブラウザが外部スクリプトを読み込む方法についてはあまり詳しくありません。

– ジャクソン

2020 年 9 月 4 日 18:36



------------------------

react を使用するために JavaScript をコンパイルする必要はありません。ドキュメントを確認してくださいなしで使用する方法については。

ただし、React のような宣言型 GUI システムには、汎用言語で記述すると冗長で面倒なコンポーネントがいくつかあります。したがって、react は「JSX」として知られる Javascript のバリアントを提供します。これにより、JavaScript コード内に XHTML を直接記述することができます。 JSX は React チームによって発明されたため、ブラウザは JSX を認識しません。したがって、React には、派手な XML の部分をブラウザが理解できる汎用の Javascript に変換する方法が必要です。

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。