Vă gândiți să încercați să codați cu React? Iată noile funcții cheie de încercat în React 18.
React este o bibliotecă JavaScript open-source foarte populară creată de Facebook în 2013. Datorită flexibilității sale, mulți dezvoltatori își folosesc unele dintre caracteristicile pentru a construi componente rapide, eficiente și reutilizabile de interfață cu utilizatorul (UI).
În martie 2022, echipa a lansat cea mai recentă și anticipată versiune a bibliotecii React, React 18, care include noi funcții care se concentrează pe îmbunătățirea performanței aplicației.
Noile funcții din React 18
React 18 constă în câteva funcții noi utile adăugate la bibliotecă JavaScript open-source. Multe dintre aceste modificări nu au fost în versiunea anterioară, în timp ce alte caracteristici au fost îmbunătățite. Unele dintre aceste caracteristici includ; un nou API root, Automatic Batching, Transition API, Suspense API și lansarea de noi Hooks.
Noul API Root
API-ul rădăcină din React urmărește modul în care componenta de nivel superior este redată în arbore. În versiunile anterioare de React,
face metoda a fost folosită pentru a executa randarea, care se numește acum API-ul rădăcină moștenită.Cu toate acestea, React 18 vine cu un nou API root care creează o rădăcină folosind createRoot metoda și apoi redă o componentă React la rădăcina creată folosind face metodă.
Acest nou API rădăcină vă va oferi acces la funcțiile din această versiune recentă, cum ar fi caracteristica API de tranziție discutată mai târziu. Deși vechiul mod va funcționa în continuare în React 18, acesta poate fi eliminat treptat în viitor.
Fragmentul de mai jos arată modul în care API-ul rădăcină este structurat atât în mod vechi, cât și în moduri noi.
Legacy Root API
import ReactDOM din'react-dom';
import App din„./App”;ReactDOM.render(<App />, document.getElementById(„aplicație”))
Noul API Root
import ReactDOM din„react-dom/client”;
import App din„./App”;
const root = ReactDOM.createRoot(document.getElementById(„aplicație”));
root.render(<App />)
Loturi automate
Gruparea în React implică mai multe actualizări de stare într-o singură redare pentru fiecare eveniment din browser, de exemplu: a faceți clic pe eveniment. Orice modificări de stare care au avut loc în afara unui eveniment, cum ar fi o promisiune sau apel invers, nu vor fi grupate.
Cu React 18, actualizările de stare de loturi sunt efectuate automat, indiferent de locul unde au loc aceste actualizări. Această caracteristică oferă o îmbunătățire imediată a performanței și a timpului de randare. Cu toate acestea, dacă aveți o stare de componentă pe care nu doriți să fie grupată, puteți renunța la aceasta folosind flushSync metodă. Mai jos este un fragment de exemplu despre cum se poate realiza;
import { flushSync } din'react-dom';
funcţiehandleClick() {flushSync(() => {
setCount(numara => numără + 1);
]});
flushSync(() => {
setStore(magazin => !magazin);
});
}
API de tranziție
În React, actualizările făcute în UI pot fi clasificate ca actualizări urgente și de tranziție numite și non-urgente. Un exemplu de actualizare urgentă poate fi un caz de introducere a unui text într-un câmp, în timp ce cel al unei actualizări de tranziție poate fi o funcționalitate de filtrare a căutării.
Acum, dacă astfel de actualizări au loc simultan, aceasta ar putea fi numită o operațiune grea și ar putea duce la înghețarea aplicației dvs. Pentru a rezolva această problemă, aici API-ul de tranziție a numit startTransition vine să joace. Această nouă funcție îi spune lui React ce actualizări ar trebui marcate ca „tranziții”, îmbunătățind, la rândul său, interacțiunile utilizatorilor. Iată un exemplu de cod despre cum funcționează;
import { startTransition } din"reacţiona";
startTransition(() => {
setSearch (intrare);
});
Suspans
Când o aplicație este redată pe server, un fișier HTML static este returnat în browser, permițând utilizatorului să vadă cum arată aplicația în timp ce JavaScript se încarcă. Când fișierul este încărcat, HTML devine dinamic cu ceea ce este cunoscut ca hidratare. Deficitul aici este că, dacă toate acestea nu sunt la locul lor, aplicația dvs. nu ar deveni interactivă.
Pentru a rezolva această problemă, React 18 oferă două noi funcții de redare pe partea serverului (SSR) folosind Suspans componenta;
- Streamingul HTML permite trimiterea unor fragmente dintr-o componentă pe măsură ce sunt randate.
- Hidratarea selectivă prioritizează interactivitatea componentelor selectate de un utilizator.
Cârlige noi
Un mare punct de cotitură pentru React a fost introducerea lui cârlige în React versiunea 16 care permite componentelor funcției să acceseze stări și alte caracteristici React fără a scrie clase. React 18 este livrat cu cinci cârlige noi pentru a îmbunătăți experiența dezvoltatorilor;
- useId: Acest cârlig ne permite să creăm un identificator unic (ID) în aplicația noastră atât pe server, cât și pe client.
- useTransition: este folosit împreună startTransition pentru a crea o nouă actualizare de stare care poate fi numită non-urgent.
- useDefferedValue: permite amânarea actualizărilor care sunt mai puțin urgente.
- useSyncExternalStore: acest cârlig este util atunci când implementați abonamente la surse de date externe.
- useInsertionEffect: Acest cârlig este limitat la autorii bibliotecii CSS-in-JS pentru injectarea de stiluri în DOM.
Cum se actualizează la React 18
Pentru a efectua o actualizare, managerul de pachete npm sau yarn poate fi folosit rulând următoarea comandă în terminal.
npm instalare reacționează reac-dom
sau
yarn add react react-dom Apoi, va trebui să faceți o modificare la index.js fișier în directorul rădăcină al folderului proiectului de la API-ul moștenit la noul API rădăcină, așa cum se arată mai devreme.
Cum să configurați un nou proiect React 18
Pentru a configura un nou proiect React 18, pachetul create-react-app este instalat cu npm sau yarn în terminal;
npx crea-react-app my-react-app
sau
adaugă fire crea-react-app my-react-app
Îmbunătățiți performanța aplicației dvs. cu React 18
Acum știți despre câteva funcții noi în React 18, cum ar fi noul API rădăcină, Suspense, Tranziție sau Automatic Batching și cum să faceți upgrade la această nouă versiune și să o configurați de la zero.
Aceste modificări recente aduse React sunt gata pentru a le experimenta chiar acum.
