2022 márciusában a React csapata bejelentette a React 18 hivatalos kiadását. Ez a kiadás számos új funkciót tartalmaz a teljesítmény javítására, az „egyidejű renderelés” koncepciója alapján. A párhuzamos renderelés mögött meghúzódó ötlet az, hogy a DOM-hoz való renderelés folyamatát megszakíthatóvá tegye.

Az új funkciók között öt hook található: useId, useTransition, useDerredValue, useSyncExternalStore és useInsertionEffect.

Reagálás useTransition Hook

Alapértelmezés szerint az összes React állapot frissítése sürgős. Az alkalmazás különböző állapotfrissítései ugyanazokért az erőforrásokért versenyeznek, lelassítva ezzel. A useTransition Reagálás horog megoldja ezt a problémát azáltal, hogy néhány állapotfrissítést nem sürgősként jelöl meg. Ez lehetővé teszi, hogy a sürgős állapotfrissítések megszakítsák az alacsonyabb prioritásúakat.

A SearchPage komponens

Ez az egyszerű program egy keresőmotort utánoz, amely két állapotot frissít – egy beviteli mezőt és néhány keresési eredményt.

import { useState } 





instagram viewer


tól től "reagál";
funkcióSearchPage() {
 const [bemenet, setInput] = useState("")
const [lista, setList] = useState([]);
const listSize = 30000


funkciófogantyúChange(e) {
setInput(e.cél.érték);
const listItems = [];


számára (hagyja i = 0; i < listSize; i++){
listaelemek.nyom(e.cél.érték);
 }


setList (listItems);
 }


Visszatérés (
<div>
<címke>Keresés a weben: </label>
<bemenet típusa="szöveg" value={input} onChange={handleChange} />
{lista.map((elem, index) => {
 Visszatérés <div kulcs={index}>{tétel}</div>
 })}
</div>
 );
}
exportalapértelmezett SearchPage;

A frissített alkalmazáskomponens

import SearchPage tól től "./Components/SearchPage";
funkcióApp() {
Visszatérés (
<div>
< Keresőoldal/>
</div>
 );
}
exportalapértelmezett App;

A fenti kód egy React alkalmazást jelenít meg egy beviteli mezővel:

Amint elkezdi beírni a karaktereket a mezőbe, a beírt szöveg 30 000 példánya jelenik meg alább:

Ha több karaktert ír be gyorsan egymás után, akkor észre kell vennie a késést. Befolyásolja azt az időt, ameddig a karakterek megjelennek mind a beviteli mezőben, mind a „keresési eredmény területen”. Ennek az az oka, hogy a React mindkét állapotfrissítést egyszerre futtatja.

Ha a demó túl lassan vagy túl gyorsan fut az Ön számára, próbálja meg finomítani a listSize ennek megfelelően értékelni.

Ha beilleszti a useTransition hookot az alkalmazásba, akkor az egyik állapotfrissítést a másikkal szemben előnyben részesítheti.

A useTransition Hook használata

import {useState, useTransition} tól től "reagál";
funkcióSearchPage() {
const [isPending, startTransition] = useTransition();
 const [bemenet, setInput] = useState("")
const [lista, setList] = useState([]);


const listSize = 30000


funkciófogantyúChange(e) {
setInput(e.cél.érték);
 startTransition(() => {
const listItems = [];


számára (hagyja i = 0; i < listSize; i++){
listaelemek.nyom(e.cél.érték);
 }


setList (listItems);
 });
 }


Visszatérés (
<div>
<címke>Keresés a weben: </label>
<bemenet típusa="szöveg" value={input} onChange={handleChange} />


{is Pending? "...Eredmények betöltése": list.map((elem, index) => {
 Visszatérés <div kulcs={index}>{tétel}</div>
 })}
</div>
 );
}
exportalapértelmezett SearchPage;

Az Ön frissítése SearchPage A fenti kóddal rendelkező összetevő a beviteli mezőt részesíti előnyben a „keresési eredményterülettel” szemben. Ennek az egyszerű változtatásnak egyértelmű hatása van: azonnal látnia kell a beviteli mezőbe beírt szöveget. Csak a „keresési eredmények területe” marad továbbra is kis késéssel. Ez annak köszönhető, hogy a startTransitionalkalmazásprogramozási felület (API) a useTransition horogból.

A keresési eredményeket a felhasználói felület számára megjelenítő kód most a startTransition API. Ez lehetővé teszi, hogy a beviteli mező megszakítsa a keresési eredmények állapotfrissítését. Amikor az függőben () A funkció megjeleníti a „…Betöltési eredmény” üzenetet, ami azt jelzi, hogy átmenet (egyik állapotból a másikba) történik.

React useDeferredValue Hook

A useDeferredValue hook lehetővé teszi a nem sürgetett állapotfrissítés újbóli megjelenítésének elhalasztását. A useTransition hookhoz hasonlóan a useDeferredValue hook egy párhuzamossági hook. A useDeferredValue hook lehetővé teszi, hogy az állapot megtartsa eredeti értékét, amíg átmenetben van.

A SearchPage komponens a useDeferredValue() Hook segítségével

import { useState, useTransition, useDeferredValue } tól től "reagál";
funkcióSearchPage() {


const [,startTransition] = useTransition();
 const [bemenet, setInput] = useState("")
const [lista, setList] = useState([]);


const listSize = 30000


funkciófogantyúChange(e) {
setInput(e.cél.érték);
 startTransition(() => {
const listItems = [];


számára (hagyja i = 0; i < listSize; i++){
listaelemek.nyom(e.cél.érték);
 }


setList (listItems);
 });
 }
const deferredValue = useDeferredValue (bemenet);
Visszatérés (
<div>
<címke>Keresés a weben: </label>
<bemenet típusa="szöveg" value={input} onChange={handleChange} />


{lista.map((elem, index) => {
 Visszatérés <div kulcs={index} input={deferredValue} >{tétel}</div>
 })}
</div>
 );
}
exportalapértelmezett SearchPage;

A fenti kódban látni fogja, hogy a függőben () funkció már nem létezik. Ez azért van, mert a deferredValue változó a useDeferredValue hook helyett a függőben () funkció állapotátmenet során. Ahelyett, hogy a keresési eredménylista frissülne, amikor új karaktert ír be, a régi értékeit megtartja, amíg az alkalmazás nem frissíti az állapotot.

Reakció useSyncExternalStore Hook

Az alkalmazáskóddal működő useTransition és useDeferredValue hookkal ellentétben a useSyncExternalStore könyvtárakkal működik. Lehetővé teszi a React alkalmazás számára, hogy előfizessen külső könyvtárak adataira, és olvassa be azokat. A useSyncExternalStore hook a következő deklarációt használja:

const state = useSyncExternalStore (előfizetés, getSnapshot[, getServerSnapshot]);

Ez az aláírás a következőket tartalmazza:

  • állapot: annak az adattárnak az értéke, amelyet a useSyncExternalStore horog visszaad.
  • Iratkozz fel: visszahívást regisztrál, ha megváltozik az adattár.
  • getSnapshot: az adattár aktuális értékét adja vissza.
  • getServerSnapshot: a szerver renderelése során használt pillanatképet adja vissza.

A useSyncExternalStore segítségével előfizethet egy teljes adattárra vagy egy adattáron belül egy adott mezőre.

React useInsertionEffect Hook

A useInsertionEffect hook egy másik új React hook, amely könyvtárakkal működik. Az adattárak helyett azonban a useInsertionEffect hook a CSS-in-JS könyvtárakkal működik. Ez a hook a stílusmegjelenítés teljesítményével kapcsolatos problémákat kezeli. A DOM stílusát a useLayoutEffect hook elrendezésének beolvasása előtt alakítja ki.

React useId Hook

A useId hook olyan helyzetekben használható, ahol egyedi azonosítókra van szükség (kivéve a listában szereplő kulcsokat). Fő célja olyan azonosítók generálása, amelyek egyediek maradnak az ügyfél és a kiszolgáló között, elkerülve a React szerver hidratálási eltérési hibáját. A useId hook a következő deklarációt használja:

const id = useId()

A nyilatkozatban id egy egyedi karakterlánc, amely tartalmazza a : token. Bevallás után átadhatja a id változó közvetlenül azokra az elemekre, amelyeknek szüksége van rá.

Milyen értéket adnak ezek az új horgok a reakcióhoz?

A useTransition és a useDeferredValue hoook alkalmazáskód-horogok. A párhuzamos renderelés révén javítják az alkalmazások teljesítményét. A useId hook úgy kezeli a hidratálási eltérési hibát, hogy egyedi azonosítókat hoz létre az ügyfél és a kiszolgáló között.

A useSyncExternalStore és useInsertionEffect hookok külső könyvtárakkal működnek, hogy megkönnyítsék az egyidejű megjelenítést. A useInsertionEffect hook a CSS-in-JS könyvtárakkal működik. A useSyncExternalStore hook olyan adattároló könyvtárakkal működik, mint a Redux store.

Ezek a horgok együttesen jelentősen növelik a teljesítményt, ami viszont javítja a felhasználói élményt.