React18公式バージョンがリリースされました

私はまだ数日前にソースコードを見ていました。React18の機能を見ようと言いたかったのです。今日公式バージョンが出るとは思っていませんでした。

react18-リリース

次に、Reactチームがリリースしたブログ投稿React v18.0に基づいて、React18の新機能を見てみましょう。

同時

実際、以前にソースコードを実行したとき、React18が実際に並行性の時代に入ったことを視覚的に認識しました。v17バージョンのレンダリングは次のとおりです。

reactv17

Reactv18のレンダリングを比較します。

Reactv18

v18と比較すると、Reactコードの実行部分（ピンクのコードセグメント）では、v18が2つのタスクを実行し、v17が1つのタスクを動員していることがわかります。正確には何が起こったのですか？その後、私は本当にソースコードを掘り下げて、神々がどのような生意気なことをしているのかを確認する必要があります。

レンダリングが中断されます

ドキュメントでは、開発者が内部（舞台裏）で何をしているのかを知る必要がないことを明確にしていますが、1つの注意点は、レンダリングが中断される可能性があることです。以下は元のテキストからのものです。

同期レンダリングでは、更新がレンダリングを開始すると、ユーザーが画面に結果を表示できるようになるまで、更新を中断することはできません。

同時レンダリングでは、これが常に当てはまるとは限りません。Reactは更新のレンダリングを開始し、途中で一時停止して、後で続行する場合があります。進行中のレンダリングを完全に放棄することさえあります。

つまり、同期的にレンダリングする場合、（状態または小道具の）更新によってレンダリングがトリガーされると、ユーザーが再レンダリングされたUIを表示するまで中断することはできません。ただし、並行モードでは、Reactが更新をトリガーしたり、停止したり、後で再開したり、非推奨ジョブ全体を途中でレンダリングしたりする場合があります。

もちろん、Reactは内部でレンダリングと状態の一貫性を保証するので...後で掘り下げるのは良いことです。

状態は再利用できます

ここで言及されているステータスペッティングとは、次のことを指します。

もう1つの例は、再利用可能な状態です。Concurrent Reactは、UIのセクションを画面から削除し、後で前の状態を再利用しながらそれらを追加し直すことができます。たとえば、ユーザーがタブで画面から離れて戻った場合、Reactは前の画面を以前と同じ状態に復元できる必要があります。

つまり、UIの一部を削除して再度追加すると、Reactは以前の状態を再利用できます。ここでの例は、ユーザーがページから離れてクリックしてからジャンプして戻ると、Reactは同じ状態でページを復元できるはずです。

私の個人的な理解では、現在のページを離れて前のページに戻ると、以前のように完全に失われるのではなく、Reactの状態を復元でき、ページは初期状態からレンダリングされます。

私の理解が正しければ、状態を維持せずに、はるかに少ないReduxコードを書くことができます。

DataFrameサスペンスで利用可能

サスペンスはテストの新機能であり、次のことを行います。

React.Suspense

React.Suspenseコンポーネントツリー内の子コンポーネントの一部がまだレンダリングの準備ができていない場合に備えて、読み込みインジケーターを指定できます。現在、<React.Suspense>サポートさです。
// 该组件是动态加载的
const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
     
     
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={
     
     <Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

ブログ投稿の内容によると：

React 18では、Relay、Next.js、Hydrogen、Remixなどの意見のあるフレームワークでのデータフェッチにSuspenseの使用を開始できます。Suspenseを使用したアドホックデータフェッチは技術的には可能ですが、一般的な戦略としては推奨されません。

これはおそらく、最終的にReactの組み込みAPIを使用して、ページをレンダリングする前にデータがフェッチされるのを待つことができることを意味します。

言い換えれば、はるかに少ないRedux-Sagaコードを書くことができますか？

サーバーコンポーネントはまだ開発中です

サーバーコンポーネントも、現在開発中の新しいコンポーネントです。

その後、Next.jsなしでサーバーサイドレンダリングにReactの組み込みAPIを直接使用できるようになるはずです。

React18の新機能

自動ステータス更新

v18より前は、バッチ更新はReactイベントリスナーで実行され、Promise、setTimeout、JavaScriptの元のイベントリスナーは更新をパッケージ化しませんでしたが、v18はこれらのイベントを自動的にリッスンし、更新を自動的にパッケージ化してパフォーマンスを向上させます。

トランジション

これは新機能であり、主な目的は、緊急更新（緊急更新）と非緊急更新（非緊急更新）を区別することです。

2つの違いは、緊急の更新はユーザーがイベントをトリガーしたときであり、クリックや入力などのフィードバックをすぐに受け取ることを期待していることです。緊急でない更新（別名遷移更新）は、UI遷移などのようなものです。

ここに新しいフックがあります。開発者はReactにどの更新が緊急更新（緊急更新）であるかを伝えることができます。これにより、状態が変化すると、緊急更新（緊急更新）は緊急更新（緊急更新）のコンテンツをリセットできます。

サスペンス

前に簡単に説明しましたが、コード例を次に示します。

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

それがCommentまだロードされている間、それSpinnerはレンダリングされます...あなたはそれを使用する方法を理解するためにまだ例を渡す必要があります。

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

クライアントには2つの新しいAPIがあり、どちらもからのAPIreact-dom/clientをreact-dom置き換えるためいます。

createRootを置き換えReactDOM.renderます。
hydrateRoot置き換えますReactDOM.hydrate

サーバーには新しいAPIもあり、後でSSRをウォームアップする可能性があります。

renderToPipeableStream、ノード環境からストリーミングできます
renderToReadableStream、DenoとCloudflareのワーカーで動作します

新しい厳密モードの動作

まだ計画中

新しいフック

5つある：

useId

これは、サーバーとクライアントで一意のIDを生成し、サードパーティライブラリでIDが重複する問題を解決するために使用されます。ドキュメントアドレスは次のとおりです。https ：//reactjs.org/docs/hooks-reference.html#useid
useTransition

上記のように、新しい関数に対応する新しいAPIが表示され、現在のドキュメントアドレスは404です。
useDeferredValue

再レンダリングを延期するためのAPI、遅延レンダリングを中断できます（上記のレンダリングを中断できる部分を理解してください）。ドキュメントのアドレスは次のとおりです。https ：//reactjs.org/docs/hooks-reference.html#usedeferredvalue
useSyncExternalStore

このフックは、ソフトウェアコードではなく、サードパーティのライブラリ用に設計されています。特定のドキュメントアドレス：https ：//reactjs.org/docs/hooks-reference.html#usesyncexternalstore
useInsertionEffect
このフックは、ソフトウェアコードではなく、サードパーティのライブラリ用に設計されています。特定のドキュメントアドレス：https ：//reactjs.org/docs/hooks-reference.html#useinsertioneffect

新しいフックのほとんどはまだ漠然とした理解の段階にあり、より深く理解するために時間をかけて例を入力することをお勧めします。