Čo je nové v React 18: Kľúčové funkcie, ktoré môžete vyskúšať

React je veľmi populárna open-source JavaScriptová knižnica vytvorená Facebookom v roku 2013. Vďaka svojej flexibilite veľa vývojárov využíva niektoré z jeho funkcií na vytváranie rýchlych, efektívnych a opakovane použiteľných komponentov používateľského rozhrania (UI).

V marci 2022 tím spustil najnovšiu a očakávanú verziu knižnice React, React 18, ktorá obsahuje nové funkcie zamerané na zlepšenie výkonu aplikácie.

Nové funkcie v React 18

React 18 obsahuje niekoľko užitočných nových funkcií pridaných do open-source knižnica JavaScript. Mnohé z týchto zmien neboli v predchádzajúcej verzii, zatiaľ čo iné funkcie boli vylepšené. Niektoré z týchto funkcií zahŕňajú; nové root API, Automatic Batching, Transition API, Suspense API a vydanie nových Hooks.

Nové Root API

Koreňové API v Reacte sleduje, ako sa komponent najvyššej úrovne vykresľuje v strome. V predchádzajúcich verziách Reactu,

vykresliť metóda bola použitá na vykonanie vykresľovania, ktoré sa teraz nazýva staršie koreňové API.

React 18 však prichádza s novým koreňovým API, ktoré vytvára root pomocou createRoot a potom vykreslí komponent React do vytvoreného koreňa pomocou vykresliť metóda.

Toto nové koreňové rozhranie API vám poskytne prístup k funkciám v tejto nedávnej verzii, ako je napríklad funkcia prechodového rozhrania API, o ktorej sa bude hovoriť neskôr. Zatiaľ čo starý spôsob bude v React 18 stále fungovať, v budúcnosti môže byť vyradený.

Úryvok nižšie ukazuje, ako je koreňové rozhranie API štruktúrované starým aj novým spôsobom.

Legacy Root API

importovať ReactDOM od„react-dom“;
importovať App od'./App';
ReactDOM.render(<App />, dokument.getElementById('aplikácia'))

Nové Root API

importovať ReactDOM od'react-dom/client';
importovať App od'./App';
konšt root = ReactDOM.createRoot(dokument.getElementById('aplikácia'));
root.render(<App />)

Automatické dávkovanie

Dávkovanie v Reacte zahŕňa viacero aktualizácií stavu v jednom opätovnom vykreslení pri každej udalosti prehliadača, napríklad a kliknite na udalosť. Akékoľvek zmeny stavu, ku ktorým došlo mimo udalosti, ako je prísľub alebo spätné volanie, nebudú dávkované.

S React 18 sa dávkové aktualizácie stavu vykonávajú automaticky bez ohľadu na to, kde sa tieto aktualizácie uskutočňujú. Táto funkcia poskytuje hneď po vybalení zlepšenie výkonu a času vykresľovania. Ak však máte stav komponentu, ktorý nechcete dávkovať, môžete ho zrušiť pomocou flushSync metóda. Nižšie je uvedený ukážkový úryvok o tom, ako sa to dá urobiť;

importovať { flushSync } od„react-dom“;
funkciuhandleClick() {
 flushSync(() => {
 setCount(počítať => počítať + 1);
]});
 flushSync(() => {
 setStore(obchod => !obchod);
});
}

Transition API

V Reacte môžu byť aktualizácie vykonané v používateľskom rozhraní kategorizované ako naliehavé a prechodné aktualizácie sa nazývajú aj neurgentné. Príkladom urgentnej aktualizácie môže byť prípad zadania textu do poľa, zatiaľ čo prechodová aktualizácia môže byť funkcia filtrovania vyhľadávania.

Ak sa takéto aktualizácie vyskytnú súčasne, mohlo by sa to nazvať náročnou operáciou a mohlo by to viesť k zmrazeniu vašej aplikácie. Na vyriešenie tohto problému je to miesto, kde prechodové API nazývané startTransition príde hrať. Táto nová funkcia hovorí Reactu, ktoré aktualizácie by mali byť označené ako „prechody“, čím sa zlepšujú interakcie používateľov. Tu je ukážka kódu, ako to funguje;

importovať { startTransition } od"reagovať";
startTransition(() => {
 setSearch (vstup);
});

Napätie

Keď sa aplikácia vykreslí na serveri, do prehliadača sa vráti statický súbor HTML, ktorý používateľovi umožní vidieť, ako aplikácia vyzerá, kým sa načíta JavaScript. Keď sa súbor načíta, HTML sa stane dynamickým s tým, čo je známe ako hydratácia. Nedostatkom je, že ak toto všetko nie je zavedené, vaša aplikácia sa nestane interaktívnou.

Na vyriešenie tohto problému poskytuje React 18 dve nové funkcie vykresľovania na strane servera (SSR) pomocou Napätie komponent;

• Streamovanie HTML umožňuje odosielať časti komponentu pri ich vykreslení.
• Selektívna hydratácia uprednostňuje interaktivitu komponentov vybraných používateľom.

Nové háčiky

Veľkým zlomom pre React bolo predstavenie háčiky v Reacte verzia 16, ktorá umožňuje funkčným komponentom pristupovať k stavom a iným funkciám Reactu bez písania tried. React 18 sa dodáva s piatimi novými háčikmi na zlepšenie skúseností vývojárov;

• useId: Tento hák nám umožňuje vytvoriť jedinečný identifikátor (ID) v našej aplikácii na serveri aj klientovi.
• useTransition: Používa sa spolu startTransition na vytvorenie novej aktualizácie stavu, ktorú možno označiť ako neurgentnú.
• useDefferedValue: Umožňuje odloženie aktualizácií, ktoré sú menej naliehavé.
• useSyncExternalStore: Tento háčik je užitočný pri implementácii predplatného na externé zdroje údajov.
• useInsertionEffect: Tento háčik je obmedzený na autorov knižnice CSS-in-JS na vkladanie štýlov do DOM.

Ako aktualizovať na Reagovať 18

Na vykonanie aktualizácie je možné použiť správcu balíkov npm alebo priadze spustením nasledujúceho príkazu v termináli.

npm Inštalácia reagovať reagovať-dom

alebo

priadza pridať reagovať reagovať-dom 

Potom budete musieť vykonať zmenu v index.js súbor v koreňovom adresári priečinka projektu zo staršieho rozhrania API do nového koreňového rozhrania API, ako bolo uvedené vyššie.

Ako nastaviť nový projekt React 18

Ak chcete nastaviť nový projekt React 18, nainštaluje sa balík create-react-app s npm alebo yarn v termináli;

npx vytvoriť-react-app my-react-app

alebo

pridať priadzu vytvoriť-react-app my-react-app

Zlepšite výkon svojej aplikácie pomocou React 18

Teraz viete o niektorých nových funkciách v React 18, ako je nové root API, Suspense, Transition alebo Automatic Batching, a ako inovovať na túto novú verziu a nastaviť ju od začiatku.

Tieto nedávne zmeny v Reacte sú pre vás pripravené hneď teraz.