帰ってきたドンヤ、返事(feat.ニコラス)

FacebookはREACT 18のRC*バージョンを発売した.つまり、反応18は別の意味を持つのではなく、18番目のバージョンである.

Release Candidate:間もなく発売されます.βサービスは、バージョンに追加された機能を決定する段階と見なすことができ、RC段階はその安定性を確保する過程である.ソフトウェア配布ライフサイクルページ参照の方が良いです.

package.jsonで確認

{
   "dependencies": {
      "react": "^18.0.0-rc.0",
      "react-dom": "^18.0.0-rc.0",
  },
}

こうやって出てきます.昨年11月にbetaサービスが発売されて以来、RCバージョンはすぐに発売されたようだ.正式版が出る前に機能を練習し、正式版が出たら開発中のサービスに適用します.
これらの機能を見て、面白いところがたくさんありますが、今回はreact 18の新機能を簡単に見てみましょう.
Reaction 18の主な機能は、NomadCoderNicolas兄の動画リストで紹介されている内容を参考にしています.

反応サスペンス

反応サスペンスは、「Suspense」コンポーネントを使って、データなど何でも「待つ」ことができる機能です.公式文書は待つことができると強調した.より良いユーザー体験のために、これは非常に有用な機能かもしれません.少なくともページの不快さで怒られることを減らすことができます.

// Before
function Bag(){
  const { data: bag, isLoading } = useQuery("my-bag", callbackFn);
  if(isLoading){
    return <Loader />;
  }
  return <div>{bag.name} is ready.</div>;
}

上のsnippetでは、isLoadingとifセグメントの対応部分は、データ取得時にユーザに表示されるロード画面である.これは通常LoadingStateと総称される.
サスペンス機能の核心は,このロード画面を個別のコンポーネントに分離して開発できることである.

// After
function Bag(){
  const { data: bag } = useQuery("my-bag", callbackFn);
  return <div>{bag.name} is ready.</div>;
}

function App(){
  return (
    <Suspense fallback={<Loader />}>
    	<Bag />
    </Suspense>
  )
}

アプリケーションでBagコンポーネントを呼び出す場合は、Suspenceを使用してLoading Stateをロールバックプログラムにカプセル化します.
同様に、Suspenceを使用してLoading Stateを実装すると、コードの読み取りが向上します.Loading state素子はLoading機能に集中することができ、Bag素子はBagを表す機能に集中することができる.1つの関数(ここでは素子)は、1つの機能を実行するクリーンコードの原則に合致していると言える.

SSR(Server Side Rendering)

既存のリアクターはクライアントレンダリング方式を採用しています.クライアントがサーバにページリソースを要求すると、応答コードを含むすべてのJavaScriptファイルがブラウザに渡されます.渡されたコードは、ブラウザでレンダリングされた後にユーザーに表示されます.
このような状況のため、クライアントはページ番号を見るのに十分待たなければなりません.これに対して提案した解決策はSSRである.
クライアントがサーバにページ要求を発行すると、サーバ上の応答コードはページを迅速に生成し、ページのハウジングではなくUIのみを最初に送信します.その後、他のJavaScriptファイルをクライアントに送信します.
これはHydration、韓国語は「手話」と呼ばれています.でも手話より「赤心」という言葉が分かりやすいと思います.hydroは水の意味、-ateは動詞化、-ionは造名詞の接尾辞であり、水の意味とは区別がない.
空っぽのHTML UIだけが干上がった土地のようで、JavaScriptのページ全体が水に浸かっていて、肥沃な土地のようです.もちろん、お客様の立場からすると、湿潤な土地はやせた土地よりも通行しやすい.(CSRとSSRを詳しく比較した記事は後で書きます.)
SSRを用いた応答ベースのWebフレームワークには、Nextが含まれる.jsがありますが、当社は実際のサービスで使用しています.
CSRとSSRの説明が少し長くなったので、反応18に戻りましょう.react 18では、SSRをSuspenseに適用することができる.データ取得時にLoading stateが表示され、データをインポートして結果素子に戻ります.
したがって、クライアントは、データを取得している他の構成部品を待つ必要がなく、先にレンダリングされた構成部品を見ることができます.クライアントがコンポーネント上でイベントを発生すると、コンポーネントが先に水和され、ユーザーがページをより速く見ることができるようになります.