React 18に移行するにはどうすればよいですか？
React 18 は、レンダリングと一時停止の同時実行に基づく新機能を使用して、人気のあるJavaScriptコンポーネントフレームワークを進化させています。移行を行うアプリのパフォーマンス、機能、開発者エクスペリエンスの向上を約束します。
この記事では、既存のコードベースをReact 18に更新する方法を紹介します。このガイドは、最も広く適用可能な変更の概要にすぎないことに注意してください。すでにReactのベストプラクティスに従っている小さなプロジェクトの場合、移行は非常に簡単です。複雑なコンポーネントの大規模なセットは、いくつかの問題を引き起こす可能性があります。これについては、以下で詳しく説明します。
React18のインストール
他のことをする前に、npmを使用してプロジェクトのReact依存関係をバージョン18に更新します。
$ npm install react@latest react-dom@latest
新しいバージョンは、技術的には下位互換性がありません。新機能はサブスクリプションによってアクティブ化されます。まだコードを変更していないので、アプリケーションを実行して、正しくレンダリングされることを確認できるはずです。プロジェクトは既存のReact17の動作で動作します。
$ npm start
React 18機能の有効化：新しいルートAPI
コードベースを変更せずにReact18を使用すると、1つの副作用が発生します。アプリケーションが開発モードでマウントされるたびに、ブラウザーコンソールの警告が表示されます。
ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
プロジェクトをアップグレードする準備ができていない限り、この非推奨メッセージは無視しても問題ありません。React 18の機能を使用したい場合は、そこに記載されている変更を加える必要があります。古いReactDOM.render()関数は、よりオブジェクト指向の新しいルートAPIに置き換えられました。使いやすさの向上に加えて、すべての新しいタイトル機能をサポートするパラレルレンダリングシステムもアクティブになります。
ファイル内index.jsで、またはapp.js次のような行を見つけます。
これは、Reactアプリケーションの一般的なエントリポイントです。インポートされAppたコンポーネントのインスタンスをアプリケーションのルート要素としてレンダリングします。レンダリングされたコンテンツは、をinnerHTML含むHTML要素として保存されますid="react"。
React 18ルートAPIに切り替えるには、上記のコードを次のように置き換えます。
効果は古いReactDOM.render()APIと同様です。React 18では、ルート要素を初期化してアプリを単一の命令型操作としてレンダリングする代わりに、最初にルートオブジェクトを作成してから、コンテンツを明示的にレンダリングする必要があります。
次に、ルートノードをアンマウントするコード内の場所を見つけます。ReactDOM.unmountComponentAtNode()ルートオブジェクトの新しいメソッドに移動unmount()します。
レンダーコールバックの置き換え
ReactDOM.render()オプションのメソッドコールバック引数には、React 18ルートAPIに直接対応するものがありません。以前は、Rendered!Reactがルートノードのレンダリングを終了した後、このコードを使用してコンソールにログインできました。
新しいReact18サーバーの部分的なハイドレーションとスレッドレンダリング機能を使用するとコールバックのタイミングが予測できないため、この機能は削除されました。既にレンダリングコールバックを使用していて互換性を維持する必要がある場合は、リンクメカニズムを使用して同様の動作を実現できます。
Reactは、コンポーネントをマウントするときに関数参照を呼び出します。ルートノードであるコンポーネントへの参照を設定すると、レンダリングがいつ発生するかを判断でき、古いレンダリングコールバックシステムと同様の効果が得られます。
更新の問題のデバッグ
これで、アプリはReact 18の機能を使用して、コンソールの警告なしでレンダリングされるはずです。アプリケーションを徹底的にテストして、すべてが期待どおりに機能することを確認します。問題を見つけた場合は、これらの一般的な解決策で修正できます。
<厳密モード>を確認してください
コンポーネントでラップされたアプリは、React 18デザインモードでレンダリングすると動作が異なる場合があります。これは、strictモードで、コードベースが再利用可能な状態<StrictMode>をサポートしているかどうかを確認するようになったためです。この概念は、将来のリリースでReactで完全に導入される予定です。
再利用可能な状態により、Reactは以前に削除されたコンポーネントを再配線し、最後の状態を自動的に復元できます。これには、コンポーネントがダブルコール効果に耐性がある必要があります。厳密モードでは、コンポーネントを使用するたびに、コンポーネントのマウント、アンマウント、および再マウントをシミュレートし、以前の状態を復元できない問題を特定することで、再利用の準備をすることができます。アプリケーションまたはその依存関係に対処する準備ができていない問題が見つかった場合は、厳密モードを無効にすることができます。
バッチ状態の更新をサポート
React 18は、パフォーマンスを向上させるために、状態の更新を「パッケージ化」する方法を変更します。関数で状態値を複数回変更すると、Reactはそれらを1つの再レンダリングにマージしようとします：
このメカニズムは効率を向上させますが、以前はReactイベントハンドラー内でのみ機能していました。React 18では、ネイティブのイベントハンドラー、タイムアウト、またはプロミスからのものであっても、すべての状態の更新で機能します。これらの場所のいずれかで順次状態更新を実行すると、一部のコードの動作が以前とは異なる場合があります。
コードをリファクタリングする準備ができていない状況では、この動作を無効にすることができます。状態の更新をラップflushSync()して、すぐにコミットするように強制します。
削除されたサポートされていない機能の使用を停止する
上記のすべての側面を考慮に入れると、アプリケーションはReact 18と完全に互換性があるはずです。APIサーフェスにはまだいくつかの変更がありますが、ほとんどのアプリケーションに影響を与えることはありません。知っておくべきそれらのいくつかはここにあります：
unstable_changedBits削除されました-このサポートされていないAPIにより、コンテキストの更新をオプトアウトできました。利用できなくなりました。Object.assign()ポリフィルは削除されました。組み込みのない非常に古いブラウザをサポートする必要がある場合object-assignは、ポリフィルパッケージを手動で追加するObject.assign()必要があります。- Internet Explorerはサポートされなくなりました-Reactは、6月にブラウザーのサポートが終了するまで、 InternetExplorerとの互換性を公式に削除しました。アプリケーションをIEで動作させる必要がある場合は、React18にアップグレードしないでください。
- フォールバックでサスペンドを使用すること
undefinedは、以前に省略されたサスペンドnull境界と同等にfallback={undefined}なり、コードをツリー内の次の親境界にカスケードできるようになりました。React 18は、フォールバックなしでサスペンスコンポーネントを尊重するようになりました。
サーバーサイドレンダリング
サーバーサイドレンダリングを使用するアプリケーションでは、React18を使用するためにさらにいくつかの変更が必要になります。
新しいルートAPIによるとhydrate()、クライアント側コードの古い関数を、パッケージによってhydrateRoot()提供される新しい関数に置き換える必要があります。react-dom/client
サーバー側のコードで、従来のレンダリングAPI呼び出しを新しい対応するものに置き換えます。ほとんどの場合、renderToNodeStream()新しいものに切り替える必要がありますrenderToReadableStream()。新しいストリーミングAPIは、React 18のストリーミングサーバーレンダリング機能を公開します。この機能では、アプリが最初にレンダリングされた後も、サーバーは新しいHTMLをブラウザーに配信し続けることができます。
React18の機能の使用を開始する
アップグレードしたので、React 18の機能を組み込むことで、アプリをより強力にすることができます。Reactの同時実行性の使用は、コンポーネントのレンダリングを中断できることを意味し、新しい可能性とより応答性の高いユーザーインターフェイスを開きます。
追加された機能の一部には、主要なサスペンス更新、遷移を使用して状態更新に優先順位を付ける方法、および緊急ではないが頻繁な更新によって引き起こされる再レンダリングを抑制するための組み込みメカニズムが含まれます。その他の変更や改善もいくつかあります。コンポーネントメソッドundefinedから戻ることができ、配線されていないコンポーネントrender()の呼び出しに関する警告が削除され、、、などのいくつかの新しいHTML属性がReactDOMレンダラーによって認識されます。setState()imageSizesimageSrcSetaria-description
概要
React 18は安定しており、すぐに使用できます。ほとんどの場合、アップグレードプロセスは迅速かつ簡単で、npmのアップグレードと新しいルートAPIへの切り替えのみが必要です。ただし、すべてのコンポーネントをテストする必要があります。厳密モードや自動パッケージングが適用されている場合など、状況によっては動作が異なる場合があります。
この新しいリリースは、あらゆる種類のWebアプリケーションの高性能フレームワークとしてのReactの将来の方向性を示しています。また、サーバー側の一時停止と、最初のレンダリング後にユーザーにコンテンツをストリーミングし続ける機能を追加することで、Reactのサーバー側のレンダリング機能を拡張します。これにより、開発者はクライアントとサーバーの両方でレンダリングを分散する柔軟性が高まります。
コメントを残す