Dolgo pričakovani React v18 je bil končno izdan pred nekaj meseci. Čeprav ni bilo večjih sprememb, je bilo dodanih nekaj zanimivih funkcij, ki si jih je vredno ogledati. Ta članek bo obravnaval nekaj novih dodatkov in kako nadgraditi na React v18.

Kako nadgraditi na React 18

Če želite namestiti najnovejšo različico Reacta, zaženite ta ukaz v terminalu:

npm namestite reagirati reagirati-dom

Ali če uporabljate prejo:

preja dodaj react react-dom

Ko namestite najnovejšo različico, lahko začnete izkoriščati njene nove funkcije.

V React 18 je več dodatkov; tukaj so štirje najbolj omembe vredni.

1. Strogi način

StrictMode je funkcija, ki jo lahko uporabite za poudarjanje morebitnih težav v aplikaciji. Preverjanja v strogem načinu se izvajajo samo v razvojnem načinu in ne bodo vplivala na produkcijsko gradnjo. Vendar pa so lahko zelo koristni pri prepoznavanju potencialnih težav v vaši kodi.

Za kateri koli del aplikacije lahko omogočite strogi način. Omogočite ga lahko na primer za vse svoje komponente ali samo za nekatere od njih.

instagram viewer 
uvoz Reagiraj od 'reagirati';
funkcijoDemoExample() {
vrnitev (
<div>
<FirstComponent />
<Reagiraj. StrictMode>
<Druga komponenta />
<Tretja komponenta />
</React.StrictMode>
<Četrta komponenta />
</div>
 );
}

V zgornji kodi bi bile vse štiri komponente preverjene glede morebitnih težav. Vendar bodo strogi načini preverjanja veljali samo za in .

StrictMode pomaga tudi na druge načine, kot so:

  • Prepoznavanje komponent z nevarnimi življenjskimi cikli: Če ima komponenta metodo življenjskega cikla, ki je označena kot nevarna, vas bo strogi način opozoril na to.
  • Opozorilo glede podedovane uporabe API-ja ref. Če uporabljate stari API za ref niz, vas bo strogi način opozoril na njegovo uporabo.
  • Opozorilo o zastareli uporabi findDOMNode: Če uporabljate zastareli API findDOMNode, vas bo strogi način opozoril na to.
  • Odkrivanje nepričakovanih stranskih učinkov: Če komponenta sproži stranske učinke (kot je setState) na nepričakovanih mestih, vas bo strogi način opozoril na to.
  • API za odkrivanje podedovanega konteksta: Če uporabljate stari kontekstni API (ki je zdaj zastarel), vas bo strogi način opozoril na to.
  • Zagotavljanje stanja za večkratno uporabo: Če imate stanje, ki ga uporablja več komponent, bo strogi način pomagal zagotoviti, da je pravilno sinhroniziran.

Na splošno je strogi način lahko uporabna funkcija pri razvoju za pomoč pri prepoznavanju morebitnih težav v vaši kodi.

2. Prehodi

Prehodi vam omogočajo, da nekatere posodobitve uporabniškega vmesnika označite kot nenujne. To pomeni, da lahko React da prednost drugim posodobitvam, ki so pomembnejše.

Če imate na primer dve besedilni polji – eno za iskalno poizvedbo in eno za njene rezultate –, bi želeli besedilno polje z rezultati iskanja označiti kot prehod. Na ta način React ve, da mu ni treba nujno znova upodabljati tega besedilnega polja vsakič, ko uporabnik nekaj vnese v besedilno polje iskalne poizvedbe.

S funkcijo startTransition lahko posodobitev uporabniškega vmesnika označite kot prehod. Tukaj je primer:

uvoz { startTransition } od 'reagirati';
startTransition(() => {
// Vse nenujne posodobitve stanja znotraj označite kot prehode
});

Ta koda bi vse posodobitve stanja znotraj funkcije startTransition označila kot prehode. Tako se lahko React osredotoči na druge pomembnejše posodobitve uporabniškega vmesnika.

3. Samodejno doziranje

React ponuja uporabno funkcijo, imenovano paketno zbiranje, ki zmanjša število ponovnih upodobitev, ki se zgodijo, ko se stanje spremeni. To je lahko zelo koristno pri optimizaciji delovanja, zlasti kadar delo z asinhrono kodo.

Prej, če ste imeli obljubo ali ste opravljali omrežni klic, posodobitve stanja ne bi bile združene in React bi moral večkrat znova upodabljati. Vendar pa so s samodejnim pakiranjem v React 18 vse posodobitve stanja združene, tudi znotraj obljub, setTimeoutov in povratnih klicev dogodkov. To bistveno zmanjša delo, ki ga mora React opraviti v ozadju.

Posodobitve stanja lahko ročno serirate s funkcijo flushSync, vendar je od Reacta 18 ta postopek zdaj samodejen. Posledica tega je veliko boljša zmogljivost, saj bo React pred ponovnim upodabljanjem počakal, da se mikro opravilo zaključi.

4. Nove kljuke

Različica 18 uvaja veliko novosti React kljuke, vključno z useId, useTransition in useDeferredValue. Ti novi Hooki zagotavljajo odličen način za dodajanje dodatne funkcionalnosti vašim aplikacijam React z minimalnim naporom.

React 18 zagotavlja večjo zmogljivost aplikacije

React 18 je tu in s seboj prinaša nekaj odličnih izboljšav delovanja spletnih aplikacij. Z novo različico Reacta lahko preprosto ustvarite spletne aplikacije, ki so bolj odzivne in na splošno bolje delujejo. Torej, če želite ustvariti spletno aplikacijo, ki deluje gladko in je videti odlično, si oglejte React 18.