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

反応18はNPMで利用可能です！

最新のメジャーバージョンの自動バッティング、新しいAPIのようなボックスの改善のように含まれていますstartTransition , and streaming server-side サスペンスをサポートするレンダリング
反応18の機能の多くは、私たちの新しい同時レンダラの上に構築されています.並行した反応はopt - inです--それは並行した機能を使用するときだけ有効になっています-しかし、我々は人々がアプリケーションを構築する方法に大きな影響を及ぼすと思います.

反応17から反応18への更新

反応17から18への更新は2つの簡単なステップしか必要としない.

CRAテンプレートによるインストール

npx create-react-app my-app
// or
npm install --global create-react-app
// then
create-react-app my-app

マニュアルインストール

npm install react react-dom
// or
yarn add react react-dom

2 .ルートエントリファイル（通常はindex . js）に移動し、

import ReactDOM from 'react-dom';

to

import ReactDOM from 'react-dom/client';

また、ReactDOM.render() 同じファイル内のメソッド.

// ... imports etc.
ReactDOM.render(<App />, document.getElementById('root'));

に変更する必要があります。

// ... imports etc.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

現在
ランnpm run start or yarn start 開発サーバーを起動するには[http://localhost:3000](http://localhost:3000)訪問[http://localhost:3000](http://localhost:3000) アプリケーションを表示するには
そして、それ!これはあなたがしなければならないすべての他のコードを変更する必要があります.反応18はまた、あなたが反応コードを書く方法を変更しないので、すべてを再学習する必要はありません.しかし、いくつかの新しい機能をルックアップする必要があります:

何が新しい反応18で

新機能:自動バッチ処理
バッティングは、複数の状態を複数の状態を更新するときに1つの再レンダリングをより良いパフォーマンスです.自動バッティングなしで、我々は反応イベントハンドラの中で最新版を叩きました.Promisesの内部の更新、SetTimeout、ネイティブイベントハンドラ、またはその他のイベントは、デフォルトで反応でバッチされませんでした.自動バッティングでは、これらの更新プログラムが自動的にバッチされます.

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

詳細については、このポストを参照してください.

新機能移行

遷移は、緊急と非緊急の更新を区別するために反応の新しい概念です.

緊急更新は、入力、クリック、プレスなどのような直接的な相互作用を反映します.

遷移の更新を1つのビューから別のビューにUI.

典型的には、最高のユーザーエクスペリエンスのために、単一のユーザー入力は、緊急アップデートと非緊急の両方の結果として生じるべきです.入力イベントの中でstartTransition APIを使用して、更新が緊急で、「遷移」であることを知らせることができます.

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

更新はstartTransitionでラップされて非緊急として扱われ、クリックまたはキープレスのようなより緊急の更新プログラムが中断される場合中断されます.遷移がユーザーによって中断されるならば(例えば、行で複数のキャラクタをタイプすることによって)、反応は終わりでなくて、最新の最新版だけを与えている古いレンダリング仕事を投げ出します.

UseTransition :保留中の状態を追跡する値を含む遷移を開始するフック.

StartTransition:フックを使用できないときに遷移を開始するメソッドです.
遷移は、更新を中断することができます同時レンダリングにオプトインします.

新しいサスペンス機能

サスペンスを使用すると、コンポーネントツリーの一部の読み込み状態を宣言できます.

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

サスペンスは、「UIローディング状態」を反応プログラミングモデルにおける第一種の宣言概念とする.これは、私たちはそれの上に高レベルの機能を構築することができます.

新しいクライアントとサーバのレンダリングAPI

これらの変更は、ユーザーが反応17で新しいAPIにアップグレードしながら、反応17モードで古いAPIを使用し続けることができます.

反応DOMクライアント

これらの新しいAPIs 現在エクスポートされますfrom react-dom/client :

createRoot : レンダリングするかアンマウントするルートを作成する新しいメソッド.の代わりにReactDOM.render . 反応18の新機能はそれなしで動作しません.

hydrateRoot : サーバーレンダリングアプリケーションを水和させる新しい方法.の代わりにReactDOM.hydrate 新しい反応DOMサーバAPIと連動して.反応18の新機能はそれなしで動作しません.

両方createRoot and hydrateRoot 新しいオプションを受け入れるonRecoverableError あなたがログのためのレンダリングまたは水和の間、エラーから回復するとき、あなたが通知されたいならば、知らせてください.デフォルトでは、reportError , or console.error 古いブラウザで.

反DOMサーバ

これらの新しいAPIはreact-dom/server サーバ上でサスペンスをストリーミングする完全なサポートを行います.

RenderToPipeableStream :ノード環境でのストリーミング.

RenderTreadableStream : DenoおよびCloudFlareのような、現在のEDGEランタイム環境の場合.

最後に我々は現在反応の18のほとんどの概念を持って-新しい機能とはるかに.我々は我々を見るNew React Hooks 一歩一歩.

宜しく

Johstack開発者