Kauan odotettu React v18 julkaistiin vihdoin muutama kuukausi sitten. Vaikka suuria muutoksia ei tapahtunut, siihen lisättiin joitain mielenkiintoisia ominaisuuksia, joita kannattaa tarkastella. Tässä artikkelissa käsitellään joitain uusia lisäyksiä ja kuinka päivittää React v18:aan.

Kuinka päivittää Reactiin 18

Asenna Reactin uusin versio suorittamalla tämä komento päätteessä:

npm Asentaa reagoi react-dom

Tai jos käytät lankaa:

lanka add react react-dom

Kun olet asentanut uusimman version, voit alkaa hyödyntää sen uusia ominaisuuksia.

React 18:ssa on useita lisäyksiä; tässä on neljä huomionarvoisinta.

1. Tiukka tila

StrictMode on ominaisuus, jonka avulla voit korostaa sovelluksen mahdollisia ongelmia. Tiukat tilan tarkistukset suoritetaan vain kehitystilassa, eivätkä ne vaikuta tuotantokoon. Ne voivat kuitenkin olla erittäin hyödyllisiä koodin mahdollisten ongelmien tunnistamisessa.

Voit ottaa tiukan tilan käyttöön missä tahansa sovelluksesi osassa. Voit esimerkiksi ottaa sen käyttöön kaikille komponenteillesi tai vain joillekin niistä.

tuonti Reagoi alkaen "reagoi";
toimintoEsittelyesimerkki() {
palata (
<div>
<FirstComponent />
<Reagoi. StrictMode>
<Toinen komponentti />
<Kolmas komponentti />
</React.StrictMode>
<Neljäs komponentti />
</div>
 );
}

Yllä olevassa koodissa kaikki neljä komponenttia tarkistetaan mahdollisten ongelmien varalta. Tiukat tilan tarkistukset koskevat kuitenkin vain ja .

StrictMode auttaa myös muilla tavoilla, kuten:

  • Epäturvallisten osien tunnistaminen: Jos komponentilla on elinkaarimenetelmä, joka on merkitty vaaralliseksi, tiukka tila varoittaa siitä.
  • Varoitus vanhan string ref API: n käytöstä: Jos käytät vanhaa string ref API: ta, tiukka tila varoittaa sinua sen käytöstä.
  • Varoitus vanhentuneesta findDOMNode-käytöstä: Jos käytät vanhentunutta findDOMNode API: ta, tiukka tila varoittaa sinua siitä.
  • Odottamattomien sivuvaikutusten havaitseminen: Jos komponentti laukaisee sivuvaikutuksia (kuten setState) odottamattomissa paikoissa, tiukka tila varoittaa sinua siitä.
  • Vanhan kontekstin API: n tunnistaminen: Jos käytät vanhaa kontekstisovellusliittymää (joka on nyt vanhentunut), tiukka tila varoittaa sinua siitä.
  • Uudelleenkäytettävän tilan varmistaminen: Jos sinulla on tila, jota useat komponentit käyttävät, tiukka tila auttaa varmistamaan, että se synkronoidaan oikein.

Kaiken kaikkiaan tiukka tila voi olla hyödyllinen kehitysominaisuus, joka auttaa tunnistamaan koodisi mahdolliset ongelmat.

2. Siirtymät

Siirtymien avulla voit merkitä tietyt käyttöliittymäpäivitykset ei-kiireellisiksi. Tämä tarkoittaa, että React voi priorisoida muita tärkeämpiä päivityksiä.

Jos sinulla on esimerkiksi kaksi tekstikenttää – yksi hakukyselyä ja toinen sen tuloksia varten – kannattaa merkitä hakutulosten tekstikenttä siirtymäksi. Näin React tietää, että sen ei tarvitse kiireesti hahmontaa tekstikenttää uudelleen aina, kun käyttäjä kirjoittaa jotain hakukyselyn tekstikenttään.

StartTransition-funktiolla voit merkitä käyttöliittymäpäivityksen siirtymäksi. Tässä on esimerkki:

tuonti { aloitaTransition } alkaen "reagoi";
aloitaTransition(() => {
// Merkitse kaikki ei-kiireet tilapäivitykset sisällä siirtymiksi
});

Tämä koodi merkitsee kaikki startTransition-funktion sisällä olevat tilapäivitykset siirtymäksi. Näin React voi keskittyä muihin tärkeämpiin käyttöliittymäpäivityksiin.

3. Automaattinen annostelu

React tarjoaa hyödyllisen ominaisuuden nimeltä eräajo, joka vähentää tilan muuttuessa tapahtuvien uudelleenhahmonnusten määrää. Tämä voi olla erittäin hyödyllistä suorituskyvyn optimoinnissa, varsinkin kun työskentelee asynkronisen koodin kanssa.

Aiemmin, jos sinulla oli lupaus tai soitit verkkopuhelua, tilapäivityksiä ei kerätty, ja Reactin täytyi renderöidä uudelleen useita kertoja. React 18:n automaattisella eränsiirrolla kaikki tilapäivitykset kuitenkin kootaan, jopa lupausten, setTimeouts- ja tapahtumakutsujen puitteissa. Tämä vähentää merkittävästi Reactin taustalla tehtävää työtä.

Voit tehdä eräpäivityksiä manuaalisesti käyttämällä flushSync-toimintoa, mutta React 18:sta lähtien tämä prosessi on nyt automaattinen. Tämä johtaa paljon parempaan suorituskykyyn, koska React odottaa mikrotehtävän valmistumista ennen uudelleenrenderöimistä.

4. Uudet koukut

Versio 18 sisältää paljon uutta Reagoi koukut, mukaan lukien useId, useTransition ja useDeferredValue. Nämä uudet koukut tarjoavat loistavan tavan lisätä React-sovelluksiin lisätoimintoja vähällä vaivalla.

React 18 parantaa sovelluksen suorituskykyä

React 18 on täällä, ja se tuo mukanaan hienoja parannuksia verkkosovellusten suorituskykyyn. Reactin uudella versiolla voit helposti luoda verkkosovelluksia, jotka reagoivat paremmin ja toimivat yleisesti paremmin. Joten jos haluat luoda verkkosovelluksen, joka toimii sujuvasti ja näyttää hyvältä, muista tutustua React 18:aan.