Harkitsetko koodaamista Reactin kanssa? Tässä ovat tärkeimmät uudet ominaisuudet, joita voit kokeilla React 18:ssa.

React on erittäin suosittu avoimen lähdekoodin JavaScript-kirjasto, jonka Facebook loi vuonna 2013. Sen joustavuuden ansiosta monet kehittäjät hyödyntävät joitain sen ominaisuuksia rakentaessaan nopeita, tehokkaita ja uudelleenkäytettäviä käyttöliittymäkomponentteja.

Maaliskuussa 2022 tiimi julkaisi React-kirjaston uusimman ja odotetun version, React 18:n, joka sisältää uusia ominaisuuksia, jotka keskittyvät sovelluksen suorituskyvyn parantamiseen.

Reactin uudet ominaisuudet 18

React 18 sisältää joitain hyödyllisiä uusia ominaisuuksia, jotka on lisätty avoimen lähdekoodin JavaScript-kirjasto. Monet näistä muutoksista eivät olleet aiemmassa versiossa, kun taas muita ominaisuuksia parannettiin. Jotkut näistä ominaisuuksista sisältävät; uusi juurisovellusliittymä, automaattinen eräkäsittely, siirtymäsovellusliittymä, jännityssovellusliittymä ja uusien koukkujen julkaisu.

Uusi juurisovellusliittymä

instagram viewer

Reactin juurisovellusliittymä seuraa, kuinka ylätason komponentti renderöidään puussa. Reactin aiemmissa versioissa renderöi -menetelmää käytettiin renderöinnin suorittamiseen, jota nyt kutsutaan legacy root API: ksi.

React 18:n mukana tulee kuitenkin uusi pääsovellusliittymä, joka luo juuren käyttämällä luo Root -menetelmää ja hahmontaa sitten React-komponentin luotuun juureen käyttämällä renderöi menetelmä.

Tämä uusi pääsovellusliittymä antaa sinulle pääsyn tämän viimeisimmän version ominaisuuksiin, kuten myöhemmin käsiteltyyn siirtymäsovellusliittymäominaisuuteen. Vaikka vanha tapa toimii edelleen React 18:ssa, se voidaan poistaa käytöstä tulevaisuudessa.

Alla oleva katkelma näyttää, kuinka juuri API on rakennettu sekä vanhalla että uudella tavalla.

Legacy Root API

tuonti ReactDOM alkaen'react-dom';
tuonti Sovellus alkaen'./Sovellus';
ReactDOM.render(<Sovellus />, asiakirja.getElementById('sovellus'))

Uusi juurisovellusliittymä

tuonti ReactDOM alkaen'react-dom/client';
tuonti Sovellus alkaen'./Sovellus';
konst root = ReactDOM.createRoot(asiakirja.getElementById('sovellus'));
root.render(<Sovellus />)

Automaattinen annostelu

Erätoimitus Reactissa sisältää useita tilapäivityksiä yhdellä uudelleenrenderöinnillä jokaisessa selaintapahtumassa, esimerkiksi a klikkaa tapahtumaa. Tilan muutoksia, jotka tapahtuivat tapahtuman ulkopuolella, kuten lupaus tai takaisinsoitto, ei koota.

React 18:ssa erätilapäivitykset tehdään automaattisesti riippumatta siitä, missä nämä päivitykset tapahtuvat. Tämä ominaisuus parantaa suorituskykyä ja renderöintiaikaa heti valmiina. Jos sinulla on kuitenkin komponenttitila, jota et halua eristää, voit poistaa sen käytöstä käyttämällä flushSync menetelmä. Alla on esimerkkikatkelma siitä, miten se voidaan tehdä;

tuonti { flushSync } alkaen'react-dom';
toimintokahvaNapsauta() {
 flushSync(() => {
 setCount(Kreivi => laske + 1);
]});
 flushSync(() => {
 setStore(tallentaa => !myymälä);
});
}

Siirtymäsovellusliittymä

Reactissa käyttöliittymässä tehdyt päivitykset voidaan luokitella kiireellisiksi ja siirtymäpäivityksiä kutsutaan myös ei-kiireellisiksi. Esimerkki kiireellisestä päivityksestä voi olla tekstin syöttäminen kenttään, kun taas siirtymäpäivitys voi olla hakusuodatustoiminto.

Jos tällaisia ​​päivityksiä tapahtuu samanaikaisesti, sitä voidaan kutsua raskaaksi toimenpiteeksi ja se voi johtaa sovelluksesi jäädyttämiseen. Tämän ongelman ratkaisemiseksi siirtymäsovellusliittymä kutsui tätä aloitaTransition tulee pelaamaan. Tämä uusi ominaisuus kertoo Reactille, mitkä päivitykset tulisi merkitä "siirtymäksi", mikä puolestaan ​​parantaa käyttäjien vuorovaikutusta. Tässä on esimerkkikoodi siitä, miten se toimii;

tuonti { aloitaTransition } alkaen"reagoi";
startTransition(() => {
 setSearch (syöttö);
});

Jännitystä

Kun sovellus renderöidään palvelimella, selaimeen palautetaan staattinen HTML-tiedosto, jonka avulla käyttäjä voi nähdä, miltä sovellus näyttää JavaScriptin latautuessa. Kun tiedosto ladataan, HTML muuttuu dynaamiseksi ns nesteytys. Puute tässä on se, että jos kaikki nämä eivät ole paikoillaan, sovelluksestasi ei tulisi interaktiivista.

Tämän ongelman ratkaisemiseksi React 18 tarjoaa kaksi uutta SSR (Server side rendering) -ominaisuutta käyttämällä Jännitystä komponentti;

  • Streaming HTML mahdollistaa komponentin osien lähettämisen sitä mukaa, kun ne renderöidään.
  • Selektiivinen nesteytys asettaa etusijalle käyttäjän valitsemien komponenttien interaktiivisuuden.

Uudet koukut

Yksi suuri käännekohta Reactille oli esittely koukut Reactissa versio 16, jonka avulla toimintokomponentit voivat käyttää tiloja ja muita React-ominaisuuksia ilman luokkien kirjoittamista. React 18:ssa on viisi uutta koukkua kehittäjien kokemuksen parantamiseksi;

  • useId: Tämän koukun avulla voimme luoda yksilöllisen tunnisteen (ID) sovellukseemme sekä palvelimelle että asiakkaalle.
  • useTransition: Sitä käytetään rinnalla aloitaTransition luodaksesi uuden tilapäivityksen, jota voidaan kutsua ei-kiireelliseksi.
  • useDefferedValue: Sen avulla voidaan lykätä vähemmän kiireellisiä päivityksiä.
  • useSyncExternalStore: Tämä koukku on hyödyllinen ulkoisten tietolähteiden tilauksia toteutettaessa.
  • useInsertionEffect: Tämä koukku on rajoitettu CSS-in-JS-kirjaston tekijöille tyylien lisäämiseksi DOM: iin.

Kuinka päivittää reagoimaan 18

Päivityksen suorittamiseen voidaan käyttää npm- tai yarn-pakettien hallintaa suorittamalla seuraava komento päätteessä.

npm Asentaa reagoi react-dom

tai

lanka add react react-dom

Sitten sinun on tehtävä muutos index.js tiedosto projektin kansion juurihakemistossa vanhasta API: sta uuteen pääsovellusliittymään, kuten aiemmin on esitetty.

Kuinka perustaa uusi React 18 -projekti

Uuden React 18 -projektin määrittämistä varten luo-react-app-paketti asennetaan terminaaliin npm tai lanka;

npx luoda-react-app my-react-app

tai

lanka lisää luoda-react-app my-react-app

Paranna sovelluksesi suorituskykyä Reactilla 18

Nyt tiedät joistakin React 18:n uusista ominaisuuksista, kuten uudesta juurisovellusliittymästä, Suspense-, siirtymä- tai automaattisesta erästä, ja kuinka päivittää tähän uuteen versioon ja määrittää se alusta alkaen.

Nämä viimeaikaiset Reactin muutokset ovat valmiita kokemaan heti.