Dugo očekivani React v18 konačno je objavljen prije nekoliko mjeseci. Iako nije bilo većih promjena, dodane su neke zanimljive značajke koje vrijedi pogledati. Ovaj članak govori o nekim novim dodacima i kako nadograditi na React v18.

Kako nadograditi na React 18

Za instalaciju najnovije verzije Reacta pokrenite ovu naredbu na terminalu:

npm instalirati reagirati reagirati-dom

Ili ako koristite pređu:

pređa dodati reagirati reagirati-dom

Nakon što instalirate najnoviju verziju, možete početi koristiti prednosti njenih novih značajki.

Postoji nekoliko dodataka u React 18; evo četiri najistaknutija.

1. Strogi način rada

StrictMode je značajka koju možete koristiti za isticanje potencijalnih problema u aplikaciji. Provjere u strogom načinu rada izvode se samo u razvojnom načinu rada i neće utjecati na proizvodnu verziju. Međutim, oni mogu biti vrlo korisni u identificiranju potencijalnih problema u vašem kodu.

Možete omogućiti strogi način rada za bilo koji dio svoje aplikacije. Na primjer, možete ga omogućiti za sve svoje komponente ili samo za neke od njih.

instagram viewer 
uvoz Reagirati iz 'reagirati';
funkcijaDemoExample() {
povratak (
<div>
<Prva komponenta />
<Reagirati. StrictMode>
<Druga komponenta />
<Treća komponenta />
</React.StrictMode>
<Četvrta komponenta />
</div>
 );
}

U gornjem kodu, sve četiri komponente bi se provjerile radi mogućih problema. Međutim, stroge provjere načina rada primjenjivat će se samo na i .

StrictMode također pomaže na druge načine, kao što su:

  • Identificiranje komponenti s nesigurnim životnim ciklusima: Ako komponenta ima metodu životnog ciklusa koja je označena kao nesigurna, strogi način će vas upozoriti na to.
  • Upozorenje o korištenju naslijeđenog API-ja reference niza: Ako koristite naslijeđeni API za referencu niza, strogi način će vas upozoriti na njegovu upotrebu.
  • Upozorenje o zastarjeloj upotrebi findDOMNode: Ako koristite zastarjeli findDOMNode API, strogi način će vas upozoriti na to.
  • Otkrivanje neočekivanih nuspojava: Ako komponenta pokreće nuspojave (kao što je setState) na neočekivanim mjestima, strogi način će vas upozoriti na to.
  • API za otkrivanje naslijeđenog konteksta: Ako koristite API naslijeđenog konteksta (koji je sada zastario), strogi način će vas upozoriti na to.
  • Osiguravanje stanja za višekratnu upotrebu: Ako imate stanje koje koristi više komponenti, strogi način će vam pomoći osigurati da je pravilno sinkroniziran.

Općenito, strogi način rada može biti korisna značajka u razvoju koja pomaže u prepoznavanju potencijalnih problema u vašem kodu.

2. Prijelazi

Prijelazi vam omogućuju da određena ažuriranja korisničkog sučelja označite kao nehitna. To znači da React može dati prioritet drugim ažuriranjima koja su važnija.

Na primjer, ako imate dva tekstualna polja – jedno za upit pretraživanja i jedno za njegove rezultate – trebali biste označiti tekstualno polje rezultata pretraživanja kao prijelaz. Na taj način React zna da ne treba hitno ponovno prikazati to tekstualno polje svaki put kada korisnik upiše nešto u tekstualno polje upita za pretraživanje.

Možete koristiti funkciju startTransition da označite ažuriranje korisničkog sučelja kao prijelaz. Evo primjera:

uvoz {startTransition} iz 'reagirati';
startTransition(() => {
// Označite sva ažuriranja stanja koja nisu hitna kao prijelaze
});

Ovaj bi kod označio sva ažuriranja stanja unutar funkcije startTransition kao prijelaze. Na taj se način React može usredotočiti na druga važnija ažuriranja korisničkog sučelja.

3. Automatsko doziranje

React pruža korisnu značajku koja se zove skupljanje koja smanjuje broj ponovnih renderiranja koja se odvijaju kada se stanje promijeni. To može biti od velike pomoći u optimiziranju performansi, osobito kada rad s asinkronim kodom.

Ranije, ako ste imali obećanje ili ste upućivali mrežni poziv, ažuriranja stanja se ne bi grupirala, a React bi morao ponovno renderirati više puta. Međutim, s automatskim grupiranjem u Reactu 18, sva ažuriranja stanja se grupiraju, čak i unutar obećanja, setTimeouts i povratnih poziva događaja. Ovo značajno smanjuje posao koji React mora obaviti u pozadini.

Ažuriranja stanja možete skupiti ručno pomoću funkcije flushSync, ali od Reacta 18 ovaj je proces sada automatski. To rezultira puno boljom izvedbom, budući da će React pričekati da mikro-zadatak završi prije ponovnog renderiranja.

4. Nove Kuke

Verzija 18 uvodi mnogo novih Reagirajte kuke, uključujući useId, useTransition i useDeferredValue. Ove nove kuke pružaju sjajan način dodavanja dodatnih funkcija vašim React aplikacijama uz minimalan napor.

React 18 pruža poboljšanu izvedbu aplikacije

React 18 je ovdje i sa sobom donosi neka velika poboljšanja performansi web aplikacije. S novom verzijom Reacta možete jednostavno izraditi web aplikacije koje bolje reagiraju i općenito bolje rade. Dakle, ako želite stvoriti web aplikaciju koja radi glatko i izgleda sjajno, svakako provjerite React 18.