あなたは反応18の準備ができていますか?

ヘイコーダー!
あなたが反応開発者であるならば、あなたは反応の最新版についてすでに聞いたかもしれません- 18アルファに反応してください.チームはまだ更新に取り組んでおり、まだ多くの来ているので、この記事では、何が起こっているのバージョンを見てみましょう簡単にそれを破壊する.
私たちの心には、バージョンの更新があるたびに、変更の最新のセットは、現在の設定で何かを破るかどうかは、新しい完全に無関係の概念を学ぶ必要がありますが来る私たちの心に来る最初のもの?
答えはNOです、我々は反応なしで反応18を採用することができて、我々自身のペースで新しい特徴をためすことができます.
反応18 -我々は何を期待できますか?
1アウトボックスの改善(自動バッチを含む)、.
2新しいストリーミングサーバーレンダラをサポートしています.怠惰な
3 startTransition , usedeferredValueなどの他の同時的な機能
4新しいルートAPI.
このリリースでは、より多くのユーザーエクスペリエンスとコンカレント機能への適応を含む内部アーキテクチャの変更に焦点を当てています.
しかし、反応18で最も重要な、新しい追加は、同時レンダリングと関連した並行モードであるようです.
自動バッチ処理
反応18は、デフォルトでより多くのバッチ処理を行うことによってボックスのパフォーマンスの向上のうち、アプリケーションやライブラリのコードで手動でバッチ更新する必要がなくなります.

しかし、バッティングは何ですか?

バッティングは、複数の状態を複数の状態を更新するときに1つの再レンダリングをより良いパフォーマンスです.簡単な言葉では、バッチ(グループ化)は、複数の状態の更新を1つのレンダリングに結合されることを意味します.
SetStateを使用して、すべての関数の中で変数を変更するときは、SetStateでレンダリングを行うのではなく、すべてのSetStateを収集し、それらを一緒に実行します.これはバッチと呼ばれます.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

これは、不要な再レンダリングを避けるため、パフォーマンスに最適です.
しかし、反応は、それがバッチを実行したときに一貫しているために使用されませんでした.これはブラウザがイベント中にバッチ更新のみを行うために使用された反応であるが、ここでは既にイベントが処理された後に状態を更新している( fetch callbackで)

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these because
      // they run *after* the event in a callback, not *during* it
      setCount(c => c + 1); // Causes a re-render
      setFlag(f => !f); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

私はバッチしたくない場合はどうですか?
通常、バッティングは安全です、しかし、いくつかのコードは状態変化の直後に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
}

サーバ側のレンダリング
サーバー側のレンダリングは、フロントエンド上の計算を保存するためにサーバー上のHTMLにJSデータをレンダリングする方法です.この結果、初期ページ負荷が速くなる.
反応はサーバ側のレンダリングを4段階で実行します.

サーバ上で、データは各コンポーネントに対してフェッチされます.

サーバー上で

、アプリケーション全体がHTMLにレンダリングされ、クライアントに送信されます.

クライアント上で

、アプリケーション全体のJavaScriptコードがフェッチされます.

クライアント上で、245.79172は、JavaScriptは、水和として知られているサーバー生成されたHTMLに反応を接続します.
些細な版(反応17まで)で、SSRはページを水和させ始める前に、ページ全体をロードしなければなりませんでした.これはreact 18で変更されました.

ストリーミングHTML

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

コンポーネントをラップすることによって、私たちは、コメントがページの残りのためにHTMLをストリーミングし始めるのを待つ必要がないと反応します.代わりに、反応は代わりにプレースホルダ(スピナー)を送ります.
コメントのためのデータがサーバー上で準備ができているとき、反応は同じ流れに追加HTMLを送ります、そして、「正しい場所」でそのHTMLを置くために、最小限のインライン・スクリプト・タグだけでなく.

選択的水和
反応18前に、アプリケーションの完全なJavaScriptコードがロードされていない場合、水和を開始できませんでした.より大きなアプリケーションのために、このプロセスはしばらくかかることができます.
子供のコンポーネントが読み込まれている前に、アプリケーションを水和させることができます.
コンポーネントをラップすることによって、あなたは彼らが流動化と水和からページの残りを妨げるべきでないと反応することができます.これは、もはやすべてのコードを水和を開始するためにロードするのを待つ必要がないことを意味します.彼らが装っているように、反応する部品は水和することができます.
3 . startTransition
StartTransitionのための1つの重要なユースケースは、ユーザーが検索ボックスでタイプを始めるときかもしれません.検索結果が数ミリ秒(ユーザーによって予想されるように)を待つ間、入力値はすぐに更新されなければなりません.
このAPIは、迅速な更新と遅延の更新を区別する方法を提供します.遅延更新(すなわち1つのUIビューの別の遷移)は遷移更新と呼ばれます.
タイピング、ホバー、クリックのような緊急アップデートのために、我々は通常このように小道具/機能を呼びます:

setText(input)

非緊急であるか重いUIアップデートのために、我々はstarttransition APIでそれをラップすることができます:

startTransition(() => {

  setText(input);
});

新しいルートAPI
我々は通常、このようなルートレベルのDOMを作成し、反応アプリを追加します.これは現在推奨されており、現在レガシールートAPIと呼ばれています

import React from 'react';
import ReactDOM from 'react-dom';

const container = document.getElementById('root') 

ReactDOM.render(<App />, container);

代わりに、新しいルートAPIがreact18に導入されます.

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getElementById('root')

const root = ReactDOM.createRoot(container)

root.render(<App />)

React18はレガシールートAPIと新しいルートAPIの両方の反応17(または古い)アプリのスムーズな移行を維持するために18を反応させる.
ラッピング
それで、要約するために、18がもたらす反応は以下を特徴とします:

遷移APIによる同時実行制御
アプリのパフォーマンスを向上させる機能呼び出しとイベントの

自動バッチ、および

サスペンスでSSRのための

より速いページ・ロード.

React 18 docs
React 18 discussions
この記事を読んでくれてありがとう!私は、これが何らかの方法であなたに役に立つことを望みます.
ハッピーコーディング💜