18に反応するためにグレードアップする方法

反応18反応の主要なリリースの長い行の最新です.これにより、new features for Suspense , 新しいuseId , useSyncExternalStore , and useDeferredValue フックだけでなく、新しいstartTransition API.
反応18はまだ安定したリリースではありませんが、あなたのアプリケーションをテストすることは有用です.
反応の以前のメジャーリリースと同様に、反応18はほとんどのアプリのためのかなり簡単な移行です.
中Strict Mode has received some changes それはあなたのアプリに影響を与える可能性がありますautomatic batching いくつかの新しいエッジのケースを紹介することがあります、彼らは唯一のアプリケーションに影響を与えないfollow the Rules of React properly .
それらの考慮の外で、アップグレードしましょう!

インストール

最初に、反応18をインストールすることから始めてください.

npm i [email protected] [email protected]

または使用するならyarn :

yarn add [email protected] [email protected]

あなたが作成反応アプリを使用している場合は、また、することができますupgrade to the newest v5 使用方法:

npm i react-scripts@5

Or

yarn add react-scripts@5

次に、反応に依存する可能性のある依存関係をアップグレードしてください.
例えば、アップグレードReact Redux to v8 or SWR to 1.1.0

レンダリングメソッドの更新

あなたが反応18をインストールしたあと、あなたのアプリケーションが実行しているとき、あなたはエラーを受けるかもしれません:

Warning: 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. Learn more: https://reactjs.org/link/switch-to-createroot

これは、以前は、反応17と以前に、あなたはファイルを持っているでしょうindex.js or index.ts - 次のコードが含まれています.

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

このコードは、このリリースのために機能し続けるが、それはあなたが反応18の新機能のほとんどを活用することはできません.さらに、それは反応の将来のリリースで削除されます.
この問題を解決するには、次のコードを置き換えます.

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(
  <App />
);

終了すると、あなたが使用している反応のバージョンを確認することができる必要があります{React.version}

Try out the related code sample for getting React 18 up-and-running

結論

約束通り、18に反応する更新プログラムは簡単です!ほとんどのアプリケーションはあまりにも多くの問題なしでアップグレードすることができます.
移行中に問題に遭遇しているならStrictMode , 任意の問題に実行する場合は一時的に削除してください.React 18 introduced some changes that may impact some apps.
私たちはあなたが新しいReact concurrent features そして、幸せなハッキング!