Što je novo u Reactu 18: ključne značajke koje treba isprobati

React je vrlo popularna JavaScript biblioteka otvorenog koda koju je kreirao Facebook 2013. godine. Zahvaljujući njegovoj fleksibilnosti, mnogi programeri koriste neke od njegovih značajki u izgradnji brzih, učinkovitih komponenti korisničkog sučelja (UI) koje se mogu ponovno koristiti.

U ožujku 2022. tim je lansirao najnoviju i očekivanu verziju biblioteke React, React 18, koja uključuje nove značajke usmjerene na poboljšanje izvedbe aplikacije.

Nove značajke u Reactu 18

React 18 sastoji se od nekih korisnih novih značajki dodanih u open-source JavaScript biblioteka. Mnoge od ovih promjena nisu bile u prethodnoj verziji, dok su druge značajke poboljšane. Neke od ovih značajki uključuju; novi root API, Automatic Batch, Transition API, Suspense API i izdanje novih udica.

Novi root API

Korijenski API u Reactu prati kako se komponenta najviše razine prikazuje u stablu. U prethodnim verzijama Reacta,

prikazati Metoda je korištena za izvođenje iscrtavanja koje se sada naziva naslijeđeni korijenski API.

Međutim, React 18 dolazi s novim root API-jem koji stvara root pomoću createRoot metodu, a zatim renderira React komponentu u stvoreni korijen pomoću prikazati metoda.

Ovaj novi korijenski API omogućit će vam pristup značajkama u ovoj novijoj verziji kao što je značajka tranzicijskog API-ja o kojoj ćemo raspravljati kasnije. Iako će stari način i dalje funkcionirati u Reactu 18, u budućnosti bi se mogao postupno ukinuti.

Isječak u nastavku pokazuje kako je korijenski API strukturiran na naslijeđeni i novi način.

Naslijeđeni korijenski API

uvoz ReactDOM iz'react-dom';
uvoz aplikacija iz'./Aplikacija';
ReactDOM.render(<aplikacija />, dokument.getElementById('aplikacija'))

Novi root API

uvoz ReactDOM iz'react-dom/client';
uvoz aplikacija iz'./Aplikacija';
konst korijen = ReactDOM.createRoot(dokument.getElementById('aplikacija'));
root.render(<aplikacija />)

Automatsko doziranje

Grupiranje u Reactu uključuje više ažuriranja stanja u jednom ponovnom prikazivanju na svakom događaju preglednika, na primjer a kliknite događaj. Sve promjene stanja koje su se dogodile izvan događaja poput obećanja ili povratnog poziva neće se grupirati.

Uz React 18, skupna ažuriranja stanja rade se automatski bez obzira gdje se ta ažuriranja događaju. Ova značajka omogućuje poboljšanje performansi i vremena renderiranja izvan okvira. Međutim, ako imate stanje komponente za koje ne želite da bude batched, možete se isključiti iz njega pomoću flushSync metoda. Ispod je ogledni isječak o tome kako se to može učiniti;

uvoz { flushSync } iz'react-dom';
funkcijaručkaClick() {
 flushSync(() => {
 setCount(računati => brojati + 1);
]});
 flushSync(() => {
 setStore(trgovina => !trgovina);
});
}

Transition API

U Reactu, ažuriranja napravljena u korisničkom sučelju mogu se kategorizirati kao hitna, a ažuriranja prijelaza također se nazivaju nehitnim. Primjer hitnog ažuriranja može biti slučaj unosa teksta u polje, dok prijelazno ažuriranje može biti funkcija filtriranja pretraživanja.

Sada, ako se takva ažuriranja dogode istovremeno, to bi se moglo nazvati teškom operacijom i moglo bi dovesti do zamrzavanja vaše aplikacije. Kako bi riješio ovaj problem, ovdje je prijelazni API pozvao startTransition dolazi igrati. Ova nova značajka govori Reactu koja ažuriranja trebaju biti označena kao "prijelazi" zauzvrat poboljšavajući interakciju korisnika. Ovdje je primjer koda kako to radi;

uvoz {startTransition} iz"reagirati";
startTransition(() => {
 setSearch (unos);
});

Suspenzija

Kada se aplikacija prikazuje na poslužitelju, statična HTML datoteka vraća se u preglednik omogućujući korisniku da vidi kako aplikacija izgleda dok se JavaScript učitava. Kada se datoteka učita, HTML postaje dinamičan s onim što je poznato kao hidratacija. Nedostatak je u tome što vaša aplikacija ne bi postala interaktivna ako sve to nije na mjestu.

Kako bi riješio ovaj problem, React 18 nudi dvije nove značajke renderiranja na strani poslužitelja (SSR) koristeći Suspenzija komponenta;

• Strujanje HTML-a omogućuje slanje dijelova komponente dok se prikazuju.
• Selektivna hidratacija daje prioritet interaktivnosti komponenti koje je odabrao korisnik.

Nove Kuke

Jedna velika prekretnica za React bilo je uvođenje kuke u Reactu verzija 16 koja omogućuje funkcijskim komponentama pristup stanjima i drugim React značajkama bez pisanja klasa. React 18 isporučuje se s pet novih kuka za bolje iskustvo programera;

• useId: Ova kuka nam omogućuje stvaranje jedinstvenog identifikatora (ID) u našoj aplikaciji i na poslužitelju i na klijentu.
• useTransition: Koristi se uz startTransition za stvaranje novog ažuriranja stanja koje se može nazvati nehitnim.
• useDefferedValue: Omogućuje odgodu ažuriranja koja su manje hitna.
• useSyncExternalStore: Ova kuka korisna je pri implementaciji pretplata na vanjske izvore podataka.
• useInsertionEffect: Ova kuka ograničena je na autore CSS-in-JS biblioteke za umetanje stilova u DOM.

Kako ažurirati za React 18

Za izvođenje ažuriranja može se koristiti npm ili upravitelj paketa yarn pokretanjem sljedeće naredbe u terminalu.

npm instalirati reagirati reagirati-dom

ili

pređa dodati reagirati reagirati-dom 

Zatim ćete morati unijeti promjene u index.js datoteku u korijenskom direktoriju mape projekta iz naslijeđenog API-ja u novi korijenski API kao što je ranije prikazano.

Kako postaviti novi React 18 projekt

Za postavljanje novog React 18 projekta, paket create-react-app se instalira s npm ili yarn u terminalu;

npx stvoriti-react-aplikacija moja-react-aplikacija

ili

pređe dodati stvoriti-react-aplikacija moja-react-aplikacija

Poboljšajte performanse svoje aplikacije uz React 18

Sada znate o nekim novim značajkama u Reactu 18 kao što je novi root API, Suspense, Transition ili Automatic Batch te kako nadograditi na ovu novu verziju i postaviti je od nule.

Ove nedavne promjene Reacta spremne su da ih iskusite upravo sada.