Kauaoodatud React v18 ilmus lõpuks paar kuud tagasi. Kuigi suuri muudatusi ei toimunud, lisati mõned huvitavad funktsioonid, millele tasub pilk peale visata. Selles artiklis käsitletakse mõningaid uusi täiendusi ja seda, kuidas minna üle versioonile React v18.

Kuidas reageerida versioonile 18

Reacti uusima versiooni installimiseks käivitage terminalis see käsk:

npm installida reageerima reageerima-dom

Või kui kasutate lõnga:

lõng lisa react react-dom

Kui olete uusima versiooni installinud, saate hakata selle uusi funktsioone kasutama.

React 18-s on mitu täiendust; siin on neli kõige tähelepanuväärsemat.

1. Range režiim

StrictMode on funktsioon, mida saate kasutada rakenduse võimalike probleemide esiletõstmiseks. Ranged režiimikontrollid käivad ainult arendusrežiimis ja ei mõjuta tootmisjärgu. Kuid need võivad olla väga kasulikud teie koodi võimalike probleemide tuvastamisel.

Saate lubada range režiimi oma rakenduse mis tahes osas. Näiteks võite selle lubada kõigi oma komponentide või ainult mõne jaoks.

instagram viewer 
importida Reageerige alates 'reageerida';
funktsiooniDemoNäide() {
tagasi (
<div>
<FirstComponent />
<Reageerige. Range režiim>
<Teine komponent />
<Kolmas komponent />
</React.StrictMode>
<Neljas komponent />
</div>
 );
}

Ülaltoodud koodis kontrollitakse kõiki nelja komponenti võimalike probleemide suhtes. Kuid ranged režiimikontrollid kehtivad ainult ja .

StrictMode aitab ka muul viisil, näiteks:

  • Ebaturvaliste elutsüklitega komponentide tuvastamine: Kui komponendil on elutsükli meetod, mis on märgitud ebaturvaliseks, hoiatab range režiim teid selle eest.
  • Hoiatus pärandstringi viite API kasutamise kohta: Kui kasutate pärandstringi viite API-t, hoiatab range režiim teid selle kasutamise eest.
  • Hoiatus findDOMNode aegunud kasutamise kohta: Kui kasutate aegunud findDOMNode API-t, hoiatab range režiim teid selle eest.
  • Ootamatute kõrvalmõjude tuvastamine: Kui komponent käivitab ootamatutes kohtades kõrvalmõjusid (nt setState), hoiatab range režiim teid selle eest.
  • Pärandkonteksti API tuvastamine: Kui kasutate pärandkonteksti API-d (mis on nüüdseks aegunud), hoiatab range režiim teid selle eest.
  • Korduvkasutatava oleku tagamine: Kui teil on olek, mida kasutab mitu komponenti, aitab range režiim tagada selle õige sünkroonimise.

Üldiselt võib range režiim olla arenduses kasulik funktsioon, mis aitab tuvastada teie koodi võimalikke probleeme.

2. Üleminekud

Üleminekud võimaldavad märkida teatud kasutajaliidese värskendused mittekiireloomulisteks. See tähendab, et React saab eelistada muid värskendusi, mis on olulisemad.

Näiteks kui teil on kaks tekstivälja – üks otsingupäringu ja teine ​​selle tulemuste jaoks –, soovite märkida otsingutulemuste tekstivälja üleminekuna. Nii teab React, et ta ei pea seda tekstivälja kiiresti uuesti renderdama iga kord, kui kasutaja midagi otsingupäringu tekstiväljale sisestab.

Kasutajaliidese värskenduse üleminekuks märkimiseks saate kasutada funktsiooni startTransition. Siin on näide:

importida { startTransition } alates 'reageerida';
startTransition(() => {
// Märkige kõik sees olevad mittekiireloomulised olekuvärskendused üleminekutena
});

See kood märgiks kõik olekuvärskendused funktsiooni startTransition sees üleminekutena. Nii saab React keskenduda muudele olulisematele kasutajaliidese värskendustele.

3. Automaatne pakkimine

React pakub abistavat funktsiooni, mida nimetatakse partiimiseks, mis vähendab oleku muutumisel tehtavate uuesti renderdamiste arvu. See võib olla jõudluse optimeerimisel väga kasulik, eriti kui asünkroonse koodiga töötamine.

Varem, kui teil oli lubadus või tegite võrgukõne, siis olekuvärskendusi ei komplekteeritud ja React pidi mitu korda uuesti renderdama. Kuid React 18 automaatse komplekteerimisega komplekteeritakse kõik olekuvärskendused, isegi lubaduste, setTimeoutide ja sündmuste tagasikutsumiste piires. See vähendab oluliselt tööd, mida React peab taustal tegema.

Saate faasivärskendusi käsitsi, kasutades funktsiooni flushSync, kuid alates React 18-st on see protsess nüüd automaatne. Selle tulemuseks on palju parem jõudlus, kuna React ootab enne uuesti renderdamist, kuni mikroülesanne lõpeb.

4. Uued konksud

Versioon 18 sisaldab palju uut Reageeri konksud, sealhulgas useId, useTransition ja useDeferredValue. Need uued konksud pakuvad suurepärast võimalust lisada oma Reacti rakendustele minimaalse pingutusega lisafunktsioone.

React 18 suurendab rakenduse jõudlust

React 18 on siin ja see toob endaga kaasa mõned suurepärased täiustused veebirakenduste jõudluses. Reacti uue versiooniga saate hõlpsasti luua veebirakendusi, mis reageerivad paremini ja toimivad üldiselt paremini. Nii et kui soovite luua veebirakendust, mis töötab sujuvalt ja näeb hea välja, vaadake kindlasti React 18.