反応18 -新機能と改善戦略

3月8日に、反応チームは反応18のRC(リリース候補)をリリースしました.最新のリリースでは、アプリケーションの数のコーディングパターンを変換する新しい機能の数をもたらしている.それは、私はこのブログでカバーされるパフォーマンスの改善のカップルと一緒にもたらします.

並行性

同時実行は、いくつかのプロセスが同時に実行されるシステムのプロパティであり、相互に相互作用することもあります.複雑すぎる?それを壊しましょう.行われているレースがあるとしましょう.今、並行性は平行線で単一のレースのためにどれくらいの人々が走っているかです.

並行処理は18が導入した新しい機能です.それは、同時にUIの複数のバージョンを準備するために反応を可能にするシーンの背後に新しいメカニズムです.
このメカニズムでは、以前の場合とは異なり、反応はレンダリングを開始し、いくつかの重要なタスクの途中で一時停止し、再度レンダリングを再開します.念頭に置いておく唯一のことは、それが完全にプロセスのレンダリングで放棄する可能性があることです.UIは、レンダリングが中断されても一貫して表示されることを保証します.
これは、バックグラウンドでスクリーンを準備するために反応する能力を与えます-新しい糸をブロックすることなく!

サーバー側レンダリングのサスペンス

反応は、次のようなサーバー側レンダリングフレームワークでサスペンスの特徴をもたらしました.リレー、水素またはリミックス.反応18
サーバのコード分割をサスペンス
サーバ上でのレンダリングのストリーミング

自動バッチ処理

バッティングは、複数の状態の更新を複数の状態の更新をより良いパフォーマンスの最適化のための単一の再レンダリングに反応することです.

以前の反応18は、バッチの更新は、反応ベースのイベントハンドラのために行われた.しかし、約束、settimeout、ネイティブイベントハンドラまたは他のイベント、バッチ更新が行われませんでした.反応18は、上記のケースのための自動バッチ更新も実行します.
コードを使ってこれを理解しましょう.
settimeout (()>> { { }
setcount ( count => count + 1 );
setflag ( flag =>!フラグ)
//反応は最後に一度だけ再描画されます(これはバッチ処理です).
);
同様に、上記のコードは次のようになります.
フェッチ(*...*/).それから、(-)>{
setcount ( counter => counter + 1 );
setflag ( flag =>!フラグ)
//反応は最後に一度だけ再描画されます(これはバッチ処理です).
))>
場合には、バッチする必要はありませんReactDOM.flushSync() . 少しのコードで理解しましょう
をインポートします.注:反応DOM、反応しない
関数handleflushesclick () {
flushsync (()>>{
setcounter ( counter => counter + 1 );
));
//今すぐにDOMを更新しました
flushsync (()>>{
setflag ( flag =>!フラグ)
));
//今すぐにDOMを更新しました
｝

遷移

この機能は、緊急対非緊急更新を区別します.緊急アップデートは、即時の応答を必要とするものです.緊急更新は、すぐに応答を必要とするか、ユーザーがすぐに対応するUIを期待するものをクリックして、入力を押すようなアクションが含まれます.
中間値は画面に表示されません.

実生活例

実際の生活の例を考慮して、タイプの債務を考えてみましょう.さて、入力を入力しながら、入力ボックスに入力された値を反映することを期待します.しかし、結果はすぐに現れると思いますか?いいえ!それは、あなたが結果を得ると討論します.だから、あなたの入力を入力する時間からいくつかの移行時間があなたの提案を得るまでです.このフレームは遷移に使用されます.
典型的には、最高のユーザーエクスペリエンスのために、単一のユーザー入力は、緊急で非緊急のアップデートの結果としてなるべきです.
からのインポート{ starttransition }
//緊急時:入力されたものを表示する
setInputValue ( input ); `
//遷移中の状態更新をマークする
startTransition (()>> { }
//遷移:入力に基づいて自動暗示を表示する
値
setSearchQuery (入力);
));

別のリアルタイムの例

準拠
ここでは、UseTransitionフックは破壊される2つのパラメタを持ちます.isPending : UI更新が遷移状態にある場合の意味startTransition : トランザクションのコードを実行する関数です.
ファンクションハンドラ
startTransition (()>> { }
settab ('コメント');
));
｝
このタブは、[写真]タブからコメントタブに切り替えるときに呼び出されます.
<Suspense fallback={<Spinner />}>
<div style={{ opacity: isPending ? 0.8 : 1 }}>
{tab === 'photos' ? <Photos /> : <Comments />}
</div>
</Suspense>


During the transition phase, while the new UI is being prepared by React, the tab with the Photos UI will be now shown to the user with 80% opacity to give a smooth view of transition.

反応中の厳格モード

The Strict Mode in development server brings forth a couple of interesting changes in React 18. This mode essentially provides out-of-box performance for React.

This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

The series of events during mounting now:

I. React mounts the component.

• Layout effects are created.
• Effects are created.

II. React simulates unmounting the component.

• Layout effects are destroyed.
• Effects are destroyed.

III. React simulates mounting the component with the previous state.

• Layout effects are created.
• Effects are created.`

During unmounting, the following events occur

I. Layout effects are destroyed and Effect effects are destroyed.

新しいフック

A . USID

useId is a new hook for generating** unique IDs on both the client and server*, while avoiding hydration mismatches. This generates an **unique string containing : which does not collide with css selectors and querySelectorAll *
また、マルチルートアプリケーションでの衝突を防ぐために、ユーザーIDを使用することもできます.同じコンポーネントの複数のIDに対して、同じIDを使用してサフィックスを追加します.

b .使用可能な値

UseDeferredValueを使用すると、ツリーの非急な部分を再レンダリングできます.我々は非緊急レンダリングについて話した覚えていますか?これは、固定された時間遅延されていないので、最初のレンダリングが画面上に反映された後、反応は、遅延レンダリングを右に試みます.

C . usesyncexternalstore

usesyncexternalstoreは、外部ストアが同期するようにストアに更新を強制することによって同時読み込みをサポートすることができます新しいフックです.外部データソースへのサブスクリプションを実装するときにUseEffectの必要性を削除します.
コードスニペット
const state = usesyncexternalstore ( subscribe , getsnapshot [, getserversnapshot ]);subscribe : 関数は、ストアが変更されるたびにコールされるコールバックを登録します.getSnapshot : ストアの現在の値を返す関数です.getServerSnapshot : サーバーレンダリング中に使用するスナップショットを返す関数です.

d . useInsertionEffect

useInsertionEffect(didUpdate);UseInsertionEffectは、JSライブラリ内のCSSを使用してレンダリングスタイルのパフォーマンスの問題に対処する新しいフックです.このフックはDOMが突然変異された後に実行されますが、レイアウト効果の前に新しいレイアウトが読み込まれます.
このフックは、同時再レンダリングと同期してレイアウトを計算するのに役立ちます.

結論

他にも小さいが重要なアップデートもありますcreateRoot() フックではなくフックReactDOM.render . このメソッドは、DOM要素とUMountroot.unmount()以外の反応よりもサーバーのストリーミングサスペンスをサポートしているrenderToPipeableStream & renderToReadableStream反応の開発者は、このリリース版のバグ修正の強化と改善とカップルに焦点を当て続けます.更新は細心の注意ではなく、朝のセッションでは、それ自体で行うことができます.それでは、アプリケーション開発者のための待機ですか?私たちのライブラリをアップグレードして作業を開始しましょう!反応チームへの功績!