Aflați cum să utilizați React 18 Hooks

În martie 2022, echipa React a anunțat lansarea oficială a React 18. Această versiune a venit cu o serie de funcții noi orientate spre îmbunătățirea performanței, bazate pe conceptul de „redare simultană”. Ideea din spatele redării simultane este de a face procesul de randare către DOM întreruptibil.

Printre noile funcții se numără cinci cârlige: useId, useTransition, useDerredValue, useSyncExternalStore și useInsertionEffect.

Reacționează la utilizarea Cârlig de tranziție

În mod implicit, toate actualizările de stare React sunt urgente. Actualizările de stare diferite din aplicația dvs. concurează pentru aceleași resurse, încetinind-o. Tranziția de utilizare Cârlig de reacție rezolvă această problemă, permițându-vă să marcați unele actualizări de stat ca neurgente. Acest lucru permite actualizărilor urgente de stare să le întrerupă pe cele cu o prioritate mai mică.

Componenta SearchPage

Acest program simplu imită un motor de căutare care actualizează două stări — un câmp de introducere și unele rezultate de căutare.

import { useState } din "reacţiona";
funcţiePagina de căutare() {
 const [input, setInput] = useState("")
const [listă, setList] = useState([]);
const listSize = 30000
funcţiehandleChange(e) {
setInput(e.ţintă.valoare);
const listItems = [];
pentru (lăsa i = 0; i < listSize; i++){
listItems.Apăsaţi(e.ţintă.valoare);
 }
setList (listItems);
 }
întoarcere (
<div>
<eticheta>Cauta pe net: </label>
<tip de intrare="text" value={input} onChange={handleChange} />
{listă.map((articol, index) => {
 întoarcere <cheie div={index}>{articol}</div>
 })}
</div>
 );
}
exportMod implicit Pagina de căutare;

Componenta aplicației actualizată

import Pagina de căutare din „./Components/SearchPage”;
funcţieApp() {
întoarcere (
<div>
< Pagina de căutare/>
</div>
 );
}
exportMod implicit Aplicație;

Codul de mai sus redă o aplicație React cu un câmp de intrare:

Pe măsură ce începeți să introduceți caractere în câmp, 30.000 de copii ale textului introdus vor apărea mai jos:

Dacă introduceți mai multe caractere în succesiune rapidă, ar trebui să observați o întârziere. Afectează timpul necesar caracterelor pentru a apărea atât în ​​câmpul de introducere, cât și în „zona de rezultate ale căutării”. Acest lucru se datorează faptului că React execută ambele actualizări de stare în același timp.

Dacă demonstrația rulează prea lent sau prea repede pentru dvs., încercați să modificați listSize valoare în consecință.

Introducerea cârligului useTransition în aplicație vă va permite să acordați prioritate unei actualizări de stare față de cealaltă.

Folosind cârligul useTransition

import {useState, useTransition} din "reacţiona";
funcţiePagina de căutare() {
const [este în așteptare, startTransition] = useTransition();
 const [input, setInput] = useState("")
const [listă, setList] = useState([]);
const listSize = 30000
funcţiehandleChange(e) {
setInput(e.ţintă.valoare);
 startTransition(() => {
const listItems = [];
pentru (lăsa i = 0; i < listSize; i++){
listItems.Apăsaţi(e.ţintă.valoare);
 }
setList (listItems);
 });
 }
întoarcere (
<div>
<eticheta>Cauta pe net: </label>
<tip de intrare="text" value={input} onChange={handleChange} />
{este in asteptare? "...Se încarcă rezultatele": list.map((articol, index) => {
 întoarcere <cheie div={index}>{articol}</div>
 })}
</div>
 );
}
exportMod implicit Pagina de căutare;

Actualizarea dvs Pagina de căutare componenta cu codul de mai sus va acorda prioritate câmpului de introducere față de „zona rezultatelor căutării”. Această modificare simplă are un efect clar: ar trebui să începeți să vedeți imediat textul pe care îl introduceți în câmpul de introducere. Doar „zona de rezultate ale căutării” va avea în continuare o ușoară întârziere. Acest lucru se datorează startTransitioninterfață de programare a aplicațiilor (API) din cârligul useTransition.

Codul care redă rezultatele căutării în interfața de utilizare utilizează acum startTransition API. Acest lucru permite câmpului de intrare să întrerupă actualizarea stării rezultatelor căutării. Cand este in asteptare() funcția afișează „...Loading result” indică faptul că are loc o tranziție (de la o stare la alta).

Reacționează folosind DeferredValue Hook

Cârligul useDeferredValue vă permite să amânați redarea unei actualizări de stare nesolicitate. Ca și cârligul useTransition, cârligul useDeferredValue este un cârlig de concurență. Cârligul useDeferredValue permite unei stări să-și păstreze valoarea inițială în timp ce este în tranziție.

Componenta SearchPage Cu Hook useDeferredValue().

import { useState, useTransition, useDeferredValue } din "reacţiona";
funcţiePagina de căutare() {
const [,startTransition] = useTransition();
 const [input, setInput] = useState("")
const [listă, setList] = useState([]);
const listSize = 30000
funcţiehandleChange(e) {
setInput(e.ţintă.valoare);
 startTransition(() => {
const listItems = [];
pentru (lăsa i = 0; i < listSize; i++){
listItems.Apăsaţi(e.ţintă.valoare);
 }
setList (listItems);
 });
 }
const deferredValue = useDeferredValue (input);
întoarcere (
<div>
<eticheta>Cauta pe net: </label>
<tip de intrare="text" value={input} onChange={handleChange} />
{listă.map((articol, index) => {
 întoarcere <div key={index} input={deferredValue} >{articol}</div>
 })}
</div>
 );
}
exportMod implicit Pagina de căutare;

În codul de mai sus veți vedea că este in asteptare() functia nu mai exista. Acest lucru se datorează faptului că deferredValue variabila din cârligul useDeferredValue înlocuiește este in asteptare() funcţionează în timpul tranziţiei de stare. În loc să se actualizeze lista cu rezultatele căutării atunci când introduceți un caracter nou, acesta își va păstra valorile vechi până când aplicația actualizează starea.

Reacționează folosind SyncExternalStore Hook

Spre deosebire de cârligele useTransition și useDeferredValue care funcționează cu codul aplicației, useSyncExternalStore funcționează cu biblioteci. Permite aplicației dvs. React să se aboneze și să citească date din biblioteci externe. Cârligul useSyncExternalStore utilizează următoarea declarație:

const stare = useSyncExternalStore (abonare, getSnapshot[, getServerSnapshot]);

Această semnătură conține următoarele:

• stat: valoarea depozitului de date pe care o returnează hook-ul useSyncExternalStore.
• Abonati-va: înregistrează un apel invers când se modifică depozitul de date.
• getSnapshot: returnează valoarea curentă a depozitului de date.
• getServerSnapshot: returnează instantaneul utilizat în timpul redării serverului.

Cu useSyncExternalStore, vă puteți abona la un întreg depozit de date sau la un anumit câmp dintr-un depozit de date.

Reacționează la utilizarea InsertionEffect Hook

Cârligul useInsertionEffect este un alt cârlig React nou care funcționează cu biblioteci. Cu toate acestea, în loc de depozite de date, cârligul useInsertionEffect funcționează cu bibliotecile CSS-in-JS. Acest cârlig abordează problemele de performanță de redare a stilului. Stilează DOM-ul înainte de a citi aspectul în cârligul useLayoutEffect.

Reacționează useId Hook

Utilizați cârligul useId în situații care necesită ID-uri unice (cu excepția cheilor dintr-o listă). Scopul său principal este de a genera ID-uri care rămân unice pentru client și server, evitând eroarea de nepotrivire a hidratării serverului React. Hook-ul useId folosește următoarea declarație:

const id = useId()

În declarație id este un șir unic care include : jeton. După declarație, puteți trece id variabilă direct la elementul (ele) care au nevoie de el.

Ce valoare adaugă aceste noi cârlige pentru a reacționa?

Cârligele useTransition și useDeferredValue sunt cârlige de cod de aplicație. Prin randarea simultană, acestea îmbunătățesc performanța aplicațiilor. Cârligul useId abordează eroarea de nepotrivire a hidratării prin crearea de ID-uri unice pentru client și server.

Cârligele useSyncExternalStore și useInsertionEffect funcționează cu biblioteci externe pentru a facilita redarea simultană. Cârligul useInsertionEffect funcționează cu biblioteci CSS-in-JS. Cârligul useSyncExternalStore funcționează cu biblioteci de depozit de date precum magazinul Redux.

Împreună, aceste cârlige oferă un impuls major performanței, ceea ce, la rândul său, îmbunătățește experiența utilizatorului.