React コンパイラとは何ですか?

React コンパイラーは、React アプリケーションのパフォーマンスを最適化する方法に革命を起こすことを約束する新しい実験的なコンパイラーです。

この記事は、この無料の Medium リンクでポッドキャスト形式で読んだり聞いたりすることができます。

コンパイラとは何ですか?

簡単に言えば、コンパイラは、あるプログラミング言語 (ソース言語) を別のプログラミング言語 (ターゲット言語) に翻訳するプログラムです。

コンパイラはソース言語をターゲット言語に翻訳します

たとえば、JSX と TSX は、ブラウザがコードを理解できるように (Babel などを使用して) JavaScript にコンパイルされます。

新しい React コンパイラを使用する理由

私が聞いた主な理由の 1 つは、パフォーマンスの最適化です。

場合によっては、React アプリケーションで不必要な再レンダリングが発生し、パフォーマンスの問題が発生することがあります。
開発者は、記憶やコールバックなどを使用してコードを最適化できます。しかし、多くの場合、これはメモ化呼び出しでいっぱいの乱雑なコンポーネントに変換されます。

React コンパイラー ソリューションとは何ですか?

簡単に言うと、React Compiler はコードを自動的に最適化し、手動でパフォーマンスを最適化する必要性を減らします。

その結果、React Compiler はアプリの応答性を向上させる必要があります。

詳しく見ていきましょう。

React コンパイラとは何ですか?

React コンパイラーは、React 18 ですでに利用可能な実験的なコンパイラーです。React 19 でもオプションのツールであり、おそらくそうなるでしょう。

React 18 で React Compiler を使用するには手動構成が必要ですが、すでに試すことができます。

React コンパイラーは、React 19 のエコシステム内で動作するように設計されています

React コンパイラをインストールする

React Compiler は Instagram の実稼働環境で使用されていますが、ベータ版としてオープンソース化されており、React 17 で利用できます。

コンパイラーには、エディターでコンパイラー分析を表示する、強く推奨される eslint プラグインが付属しています。

React Compiler を使用していない場合でも、eslint プラグインを使用できます。

React コンパイラのヘルスチェック

React Compiler をインストールする前に、互換性を確認することをお勧めします。

次のコマンドを実行します:

npx react-compiler-healthcheck@beta

以下のような結果が得られます:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

コンパイルされたコンポーネントの数が多いことは良いことです。これは、正常に最適化できるコンポーネントの数です。

私の StrictMode は有効になっていませんが、これを有効にしてこれに従っているということは、React のルールに従っている可能性が高いことを意味します。
したがって、おそらく有効にしておく必要があります。

最後に、react-compiler-healthcheck は、コンパイラーと互換性のない既知のライブラリがないかチェックします。私は何も持っていませんが、MobX を使用すると問題が発生します。それは機能しません。

React コンパイラのインストール

npm を使用して React Compiler をインストールします:

npx react-compiler-healthcheck@beta

Yarn を使用している場合:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

eslint プラグインも構成に追加する必要があります。私の場合、それは .eslintrc.js ファイルです。

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

eslint プラグインが正しく設定されると、React のルールに関する警告が表示される場合があります。その場で更新することも、後で更新することもできます。

唯一の違いは、2 番目のケースでは、React がそのコンポーネントまたはフックの最適化をスキップしたことです。

この記事は、この無料の Medium リンクでポッドキャスト形式で読んだり聞いたりすることができます。

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