何が反応18で新しいですか?

何が反応18で新しいですか？

反応の新しいバージョンがアウトされ、それは現在利用可能ですnpm ! これはいくつかの新しい興味深い機能を紹介しています.任意のコードを変更したり、新しい概念を学び、非常に重要なことは、既存のコードのいずれかを中断しないことはありません.

👉ハウツーとスタイル

それはかなり既存のプロジェクトでの反応の最新バージョンに更新する簡単です.18に反応するように更新するには、以下の手順に従ってください.

依存性の更新

    // for npm
    npm install react@18 react-dom@18

    //or for yarn
    yarn add react@18 react-dom@18

ルートインデックスに移動します.JSと以下の変更を行います.

    // Before
    import { render } from 'react-dom';
    const container = document.getElementById('app');
    render(<App />, container);

    // After
    import { createRoot } from 'react-dom/client';
    const container = document.getElementById('app');
    const root = createRoot(container);
    root.render(<App />);

The React.createRoot 反応18で実行しているルートを作成します.そして、それは反応18の改善の全てを加えて、あなたに並行した特徴を使うことができます.これはルートAPIが前進します.
以上です.他のコードを変更する必要はありません🥳.

👉並行性

これは反応18で追加された最も重要な概念です.同時実行は機能ではありません、それは実装の詳細です.それは緊急更新プログラムの更新を優先順位付けに役立ちますので、緊急時の更新/ブロック更新/緊急時に優先順位を付けることができます.

並行した反応の重要な特性は、レンダリングが中断可能であるということです.反応は、常に、単一の、中断された、同期トランザクションで、彼らが引き起こされた順序ですべての状態アップデートを処理します.この同時性概念の追加で、あなたは、特定の状態更新が他のものより低い優先順位を持っているという反応を伝えることができます、そして、反応はより高い優先順位で他の州更新を扱います.
あなたは、状態が反応18で新しく導入される新しいAPIのうちの1つを使用してより低いプライオリティーを持つと反応することができますuseTransition and startTransition

👉UseTransitionとstartTransition

useTransition and startTransition いくつかの状態の更新プログラムをマークしない緊急です.他の州の更新はデフォルトで緊急と見なされます.
例えば
緊急状態の更新-テキストの入力を更新
非緊急状態の更新-検索結果のリストをレンダリングする

利用変遷

フックであるので機能部品で使用できます.

2つの値の配列を返します.

iOceations :遷移の保留状態に対するステートフル値

StartTransition遷移を開始する関数

変遷

このメソッドはuseTransition クラスコンポーネントなど、利用できません.

これにより、指定されたコールバック内で更新をマークします.

以下の作業例を見てください.私たちはUI上でレンダリングする2千人のユーザーのリストがあります.最初の例では、リストをレンダリングする伝統的な方法を使用していますuseTransition フック.ユーザーの検索中にパフォーマンスの違いに気づくでしょう.
最初の例では、入力ボックスに入力している間、少しの遅れに気がつきます.これは、反応がフィルタリングされたリスト州更新を待っていて、入力ボックスの状態を更新しているからです.
そして、2番目の例では、リストの更新状態を低優先度に保つように反応している.

優先順位付けなしで

同時実行レンダリングで

重要な注意:*それはすべての状態の更新プログラムをラップすることをお勧めしませんstartTransition 代わりに、UIパフォーマンスを高めるために利用できる他の解決策がない場合にのみ使用します.

使用例

それは、新しく更新された状態が準備ができるまで、古い状態を示すように反応するように指示します.これはstatrTransition() ただし、状態の更新を完全に制御できない場所で使用できます.たとえば、親コンポーネントから子コンポーネントに渡された状態です.これを使用するには、単に内部変数useDeffedValue() , それから、あなたの子要素は、更新された値が利用できるまで、古い状態を得ます.

    const userList = useDeferredValue(props.list);

👉図書館用の新しいフック

反応18はいくつかのフックを導入しました.

USESyncexternalstore

UseInsertionEffect

USID

Note: These hooks are intended to be used by libraries, not application code. As an application developer you will probably ever use these hooks.

👉自動バッチ処理

自動バッチは、1つの状態更新として実行されるように一緒に複数の状態の更新をグループ化することができます.これは、より良いパフォーマンスのための単一の再レンダリングになります.
バッティングは既に反応の古いバージョンで存在していたが、イベントハンドラだけを反応させるために制限されました.たとえば、あなたが同じClickイベントの中で2つの州更新をするならば、反応は常に1つの再表示にこれらを打った.次のコードを実行すると、クリックするたびに、2度の状態を設定しますが、単一のレンダリングを実行するだけです

自動バッティング反応18では、現在の状態の約束、SetTimeout、ネイティブイベントハンドラ、またはデフォルトで反応してバッティングされていない他のイベントのバッティングをサポートしています.下記の例を見てください.

私はバッチしたくない場合はどうですか？

通常、バッティングは安全ですが、いくつかのコードは、状態変化の直後にDOMから何かを読むことに依存するかもしれません.これらのユースケースの場合は、ReactDOM.flushSync() バッティングを選ぶ

    import { flushSync } from 'react-dom'; // Note: react-dom, not react

    function handleClick() {
      flushSync(() => {
        setCounter(c => c + 1);
      });
      // React has updated the DOM by now
      flushSync(() => {
        setFlag(f => !f);
      });
      // React has updated the DOM by now
    }

👉新しいサスペンス機能

サスペンスコンポーネントは、古いバージョンの反応に既に存在します.しかし、唯一のサポートユースケースは、コードを使用して分割分割された.怠惰で、サーバー上でレンダリングするとき、まったくサポートされませんでした.サスペンスコンポーネントを使用して、別のコンポーネントがコンポーネントのレンダリング、つまり怠惰な読み込みに準備されるまで、フォールバックコンポーネントを表示している必要があります.

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

Response 18は、サーバー側のレンダリングのためにサスペンス動作を可能にします、そして、近い将来データ取り込みの場合.

👉サーバーコンポーネント

しかし、これらはまだ研究開発段階にあります.これらのコンポーネントは、サーバー上で特定のサーバー側のみのロジックを実行できるようにレンダリングするものです.これは、クライアント上で実行してはならないサーバー上のタスクを実行するために使用されます.
これは実験的な機能であり、あなたのアプリケーションで使用する準備ができていません.これは近い将来リリースされる予定です.詳細は入手可能ですhere .