何が新しい反応18で

主なバージョンは、常に私を興奮させます、そして、我々はこの時反応するのを見ています.
楽しい部分は、反応チームがこのリリースに全く異なるアプローチを持っていたということです.
彼らは労働グループ(業界からの人々)を巻き込むことに決めました.

並行反応

これは、反応する最も重要な新しい追加です、彼らが同時反応を呼ぶ何か.
公式リリースノートでは、彼らは私たち(反応ユーザー)はどのように動作するかを心配する必要はありません教えてください.
それはどんなAPIでも露出していないコアに実装されています.
しかし、反応ライブラリ管理者はこれについてもっと詳細に説明しなければなりません.
ハイレベルの概要として、
それは、より自由でレンダリングする方法です.反応18において、レンダリングフローは1つの単一の同期トランザクションであった.
これは、今では物事をレンダリングすることができます、それを一時停止することを決定すると、それらを完全に停止するなどを選択して18.
これは、異なる状態を前に表示することができ、ユーザーが以前よりも速い状態になることを意味します.
反応のこの部分は、最初の計画は、常にオンオプションとしてこれを起動することであったとして、彼らのワーキンググループによって大きく操縦されます.
ワーキンググループは明らかに摩擦と少ない採用を引き起こすと述べた.
それで、それは現在opt - in機能です.そして、あなたがそれを使わないならば、それは起動しません.
だから、まだこれについて心配せずに18反応するために更新することができます!(とにかく移行するのは賢明です).

自動バッチ処理

あなたは、反応状態変化が個々の再貸出を引き起こすと気がつきました.
そして、多くの場合、これらはとにかく関係があります.
反応は既にイベントハンドラの中でバッチ更新に決定しました、しかし、これは約束、タイムアウト、またはネイティブイベントハンドラの中で更新を除外しました.
すばやく垣間見る

setTimeout(() => {
  setCount((c) => c + 1);
  setTitle('reloaded');
}, 100);

反応18で、これは各々の州のために2つの再貸出を引き起こします.
しかし、反応18では、これらはタイムアウト機能の終了時に1つだけ再描画される.
あなたが想像できるように、これはより少ない不具合とより速いアプリケーションを与えます.

遷移

トランジションは反応の新しい概念です、そして、彼らは緊急で非緊急のアップデートを区別するのに用いられます.
緊急更新の例は、直接ユーザーの相互作用、タイピング、クリック、およびプレスです.
また、非緊急の更新は、次のようになります.
主なアイデアは、緊急の移行を直接表示することです.ユーザーはいくつかの相互作用を作り、直接反応を期待した.
デフォルトはすべてが緊急として示されるということです、しかし、我々はstartTransition機能で彼らを包むことによって非緊急であるために特定のものを延期することができます.

import { startTransition } from 'react';

// Urgent
setInputValue(input);

// Non-urgent
startTransition(() => {
  setSearchQuery(input);
});

大きな部分は、これが同時ビルドとよく絡むことです.非緊急セクションの要素を迅速に緊急のものによって中断することができます.
検索フィールドを取りましょう.緊急の行動(入力)が起こる限り、我々は非緊急の移行(実際の結果を示す)を破壊することができます.
トランジションに関連する新しいフックもあります.そして、我々は新しいフック部でより多くを話します.

新しいフック

いくつかの新しいフックがご利用いただけます.それぞれを通して行きましょう.
UseID :
名前が示すように、それはユニークなIDを生成するためのフックです、そして、それはクライアントとサーバー側で使われることができます.
使用方法:
非緊急としてマーク特定の更新.このフックは、ユーザーにいくつかの装填スピナーを示すために保留中の状態を与えます.
使用可能です.
レンダリングツリーの非緊急部分の再レンダリングを延期するフック.
この1つは、ディベートに似ていますが、特定の時間遅延なしで、反応を意味しようとするとすぐにできるだけ早く解決することができます.
USESyncexternalstore :
外部データストアが同時読み込みをサポートすることを許可します.これにより、外部のストアに購読をラップする必要がなくなります.
これは、状態を外部に反応するときに使用することをお勧めします.
UseInsertionEffect :
このフックはレンダリングでスタイルを注入することができますが、パフォーマンスは最適化されます.このフックの必要性は主に同時レンダリングに付属しています.したがって、JSでCSSでパフォーマンス問題を見るなら、this a more profound readを与えます.

サスペンス

サスペンス生態系全体がかなりの改造を得ている.これで、コンポーネントの小さな部分を読み込むために使用することができます.
サスペンスは反応に存在しましたが、コード分割に制限されました.
反応のサスペンス18遷移APIとの組み合わせで最高の作品.その後、反応は十分なデータが結果を表示し、不良負荷状態を防ぐために収集されたときに決定することができます.
彼らは今もサーバー側のサスペンスをサポートし、将来的にAPIを改善し続ける予定です.

もっと多く

これはもちろん、すべてが変更されていないが、それの大きな側面です.
私は18にアップグレードする別の記事を捧げる可能性がありますし、別の1つ後に私の経験や問題には、並行反応に移動して期待することができます.
今までのところ、反応18についてはとても興奮しています.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook