React Labs: 6月2022年版 最新開発状況

2022年6月15日 Andrew Clark、Dan Abramov、Jan Kassens、Joseph Savona、Josh Story、Lauren Tan、Luna Ruan、Mengdi Chen、Rick Hanlon、Robert Zhang、Sathya Gunasekaran、Sebastian Markbåge、そして Xuan Huang 著

---

---

通常、私たちは常に多くのプロジェクトに取り組んでおり、実験的なものから明確に定義されたものまで様々です。今後、これらのプロジェクト全体で、コミュニティとこれまで取り組んできたことについて定期的に共有していきたいと考えています。

期待値の設定として、これは明確なタイムラインを示したロードマップではありません。これらのプロジェクトの多くは活発な研究段階にあり、具体的なリリース日を決定することは困難です。私たちが学ぶものによっては、現在のイテレーションでリリースされない可能性もあります。代わりに、私たちは現在考えている問題領域と、これまでの知見を皆さんと共有したいと考えています。

サーバーコンポーネント

2020年12月に、React サーバーコンポーネント (RSC) の実験的デモを発表しました。それ以来、React 18での依存関係の最終処理を行い、実験的なフィードバックから得られた変更に取り組んできました。

特に、フォークされたI/Oライブラリ（例：react-fetch）を使用するという考え方を放棄し、より良い互換性のためにasync/awaitモデルを採用しています。データフェッチにはルーターを使用することもできるため、これは技術的にはRSCのリリースを妨げません。もう1つの変更点として、ファイル拡張子によるアプローチから境界の注釈付けに切り替えています。

WebpackとViteの両方で共有セマンティクスに関するバンドラーのサポートを統一するために、VercelとShopifyと協力しています。リリース前に、RSCのセマンティクスがReactエコシステム全体で同じであることを確認したいと考えています。これが安定版に到達するための大きな障害となっています。

アセットの読み込み

現在、スクリプト、外部スタイル、フォント、イメージなどのアセットは、通常、外部システムを使用してプリロードおよびロードされます。これにより、ストリーミング、サーバーコンポーネントなどの新しい環境間での調整が難しくなる可能性があります。すべてのReact環境で動作するReact APIを通じて、重複排除された外部アセットをプリロードおよびロードするためのAPIを追加することを検討しています。

また、Suspenseをサポートして、読み込まれるまで表示をブロックするが、ストリーミングと同時レンダリングをブロックしないイメージ、CSS、フォントを使用できるようにすることを検討しています。これにより、ビジュアルがポップアップしてレイアウトがシフトする「ポップコーン現象」を回避できます。“ポップコーン現象“

静的サーバーレンダリングの最適化

静的サイト生成 (SSG) と増分静的再生 (ISR) は、キャッシュ可能なページのパフォーマンスを得るための優れた方法ですが、特にコンテンツの大部分がキャッシュ可能ではない場合でも、動的サーバーサイドレンダリング (SSR) のパフォーマンスを向上させる機能を追加できると考えています。コンパイルと静的パスを利用したサーバーレンダリングの最適化方法を検討しています。

React最適化コンパイラ

React Conf 2021で、React Forgetの初期プレビューを行いました。これは、Reactのプログラミングモデルを維持しながら、再レンダリングのコストを最小限に抑えるために、useMemoとuseCallbackの呼び出しに相当するものを自動的に生成するコンパイラです。

最近、コンパイラをより信頼性が高く、機能的なものにするための書き直しを完了しました。この新しいアーキテクチャにより、ローカル変数の変更などのより複雑なパターンを分析してメモ化できるようになり、メモ化フックと同等の機能を超えた、多くの新しいコンパイル時最適化の機会が開かれます。

コンパイラの多くの側面を探求するためのプレイグラウンドにも取り組んでいます。プレイグラウンドの目標はコンパイラの開発を容易にすることですが、これにより、コンパイラを試用し、コンパイラの動作に関する直感を構築することが容易になると考えています。これは、内部の動作に関する様々な洞察を示し、入力時にコンパイラの出力をライブレンダリングします。これは、リリース時にコンパイラと共に提供されます。

オフスクリーン

現在、コンポーネントの表示と非表示を切り替えるには、2つの方法があります。1つは、ツリーから完全に追加または削除することです。このアプローチの問題は、スクロール位置などのDOMに格納された状態を含む、UIの状態がアンマウントするたびに失われることです。

もう1つの方法は、コンポーネントをマウントしたまま、CSSを使用して視覚的に外観を切り替えることです。これにより、UIの状態は保持されますが、Reactは非表示のコンポーネントとそのすべての子を新しい更新を受信するたびにレンダリングし続ける必要があるため、パフォーマンスコストが発生します。

オフスクリーンは3番目のオプションを提供します。UIを視覚的に非表示にする一方、そのコンテンツの優先度を下げます。これは、content-visibility CSSプロパティと精神的に似ています。コンテンツが非表示の場合、UIの残りの部分と同期状態を維持する必要はありません。Reactは、アプリの残りがアイドル状態になるまで、またはコンテンツが再び表示されるまで、レンダリング作業を延期できます。

オフスクリーンは、高レベル機能を有効にする低レベル機能です。startTransitionなどのReactの他の同時実行機能と同様に、ほとんどの場合、Offscreen APIを直接操作するのではなく、次のようなパターンを実装するための意見のあるフレームワークを介して操作します。

• インスタント遷移。一部のルーティングフレームワークは、リンクにカーソルを合わせた場合など、後続のナビゲーションを高速化するために、すでにデータをプリフェッチしています。オフスクリーンを使用すると、バックグラウンドで次の画面をプリレンダリングすることもできます。
• 再利用可能な状態。同様に、ルートやタブ間を移動する場合、オフスクリーンを使用して前の画面の状態を保持し、中断したところから再開できます。
• 仮想化されたリストレンダリング。大量のアイテムを表示する場合、仮想化されたリストフレームワークは、現在表示されているよりも多くの行をプリレンダリングします。オフスクリーンを使用して、リスト内の表示されているアイテムよりも低い優先順位で非表示の行をプリレンダリングできます。
• バックグラウンドコンテンツ。モーダルオーバーレイを表示する場合など、非表示にせずにバックグラウンドのコンテンツの優先順位を下げる関連機能も検討しています。

トランジショントレース

現在、Reactには2つのプロファイリングツールがあります。元のプロファイラは、プロファイリングセッションのすべてのコミットの概要を示します。各コミットについて、レンダリングされたすべてのコンポーネントとそのレンダリングにかかった時間も表示されます。React 18で導入されたタイムラインプロファイラのベータ版もあり、コンポーネントが更新をスケジュールするタイミングと、Reactがこれらの更新を処理するタイミングを示します。これらのプロファイラはどちらも、開発者がコードのパフォーマンスの問題を特定するのに役立ちます。

コンテキスト外の個々の遅いコミットやコンポーネントを知ることは、開発者にとってそれほど役に立たないことに気付きました。遅いコミットの実際の原因を知る方がはるかに役立ちます。そして、開発者は、パフォーマンスの回帰を監視し、インタラクションが遅かった理由と修正方法を理解するために、特定のインタラクション（例：ボタンクリック、初期ロード、ページナビゲーション）を追跡できることを望んでいます。

以前は、インタラクション追跡APIを作成することでこの問題を解決しようとしましたが、インタラクションが遅かった理由の追跡精度を低下させ、場合によってはインタラクションが永遠に終わらないという根本的な設計上の欠陥がありました。これらの問題のため、最終的にこのAPIを削除しました。

これらの問題を解決するインタラクション追跡APIの新しいバージョン（startTransitionを介して開始されるため、暫定的にトランジショントレースと呼ばれています）に取り組んでいます。

新しいReactドキュメント

昨年、新しいReactドキュメントウェブサイトのベータ版を発表しました（後にreact.devとしてリリース）。新しい学習教材では、最初にフックを教え、新しい図、イラスト、多くのインタラクティブな例と課題があります。React 18のリリースに集中するために、その作業を一時中断しましたが、React 18がリリースされたので、新しいドキュメントの完成とリリースに積極的に取り組んでいます。

現在、エフェクトに関する詳細なセクションを作成しています。これは、初心者と経験豊富なReactユーザーの両方にとって、より難しいトピックの1つであるという声を聞いています。エフェクトとの同期は、このシリーズで最初に公開されたページであり、今後数週間でさらに追加される予定です。エフェクトに関する詳細なセクションの作成を開始した当初、Reactに新しいプリミティブを追加することで、多くの一般的なエフェクトパターンを簡素化できることに気付きました。useEvent RFCでその最初の考え方を共有しました。現在初期の調査段階にあり、まだアイデアを反復しています。これまでのRFCへのコミュニティからのコメント、そして進行中のドキュメントの書き直しへのフィードバックと貢献に感謝しています。特に、新しいウェブサイトの実装への多くの改善を送信してレビューしてくれたHarish Kumarに感謝したいと思います。

このブログ記事のレビューをしてくれたSophie Alpertに感謝します！