Kas soovite proovida Reactiga kodeerimist? Siin on peamised uued funktsioonid, mida React 18-s proovida.

React on väga populaarne avatud lähtekoodiga JavaScripti teek, mille Facebook lõi 2013. aastal. Tänu selle paindlikkusele kasutavad paljud arendajad mõningaid selle funktsioone kiirete, tõhusate ja korduvkasutatavate kasutajaliidese (UI) komponentide loomisel.

2022. aasta märtsis tõi meeskond välja Reacti teegi uusima ja oodatud versiooni React 18, mis sisaldab uusi funktsioone, mis keskenduvad rakenduse jõudluse parandamisele.

Reacti uued funktsioonid 18

React 18 sisaldab mõningaid kasulikke uusi funktsioone, mis on lisatud avatud lähtekoodiga JavaScripti teek. Paljud neist muudatustest ei olnud eelmises versioonis, samas kui teisi funktsioone täiustati. Mõned neist funktsioonidest hõlmavad; uus juur-API, automaatne komplekteerimine, ülemineku API, Suspense API ja uute konksude väljalase.

Uus juur API

Reacti juur-API jälgib, kuidas ülataseme komponent puus renderdatakse. Reacti eelmistes versioonides on

instagram viewer
renderdama renderduse teostamiseks kasutati meetodit, mida nüüd nimetatakse pärandjuure API-ks.

React 18-l on aga uus juur-API, mis loob juurfaili kasutades looJuur meetod ja seejärel renderdab Reacti komponendi loodud juurele, kasutades renderdama meetod.

See uus juur-API annab teile juurdepääsu selle hiljutise versiooni funktsioonidele, näiteks ülemineku API funktsioonile, mida käsitletakse hiljem. Kuigi vana viis töötab endiselt React 18-s, võidakse see tulevikus järk-järgult lõpetada.

Allolev koodilõik näitab, kuidas juur-API on üles ehitatud nii pärand- kui ka uutel viisidel.

Legacy Root API

importida ReactDOM alates'reageerimine';
importida Rakendus alates'./Rakendus';
ReactDOM.render(<Rakendus />, dokument.getElementById('rakendus'))

Uus juur API

importida ReactDOM alates'reageerimis-/klient';
importida Rakendus alates'./Rakendus';
konst root = ReactDOM.createRoot(dokument.getElementById('rakendus'));
root.render(<Rakendus />)

Automaatne komplekteerimine

Reacti komplekteerimine hõlmab mitut olekuvärskendust ühe uuesti renderdamisega iga brauseri sündmuse puhul, näiteks a klõpsake sündmust. Mis tahes olekumuudatusi, mis toimusid väljaspool sündmust, nagu lubadus või tagasihelistamine, ei koondata.

React 18 puhul tehakse olekuvärskenduste komplekteerimine automaatselt olenemata nende värskenduste toimumiskohast. See funktsioon parandab koheselt jõudlust ja renderdusaega. Kui teil on aga komponendi olek, mida te ei soovi pakkida, saate sellest loobuda kasutades flushSync meetod. Allpool on näidisjupp selle kohta, kuidas seda teha;

importida { flushSync } alates'reageerimine';
funktsioonikäepideKlõpsake() {
 flushSync(() => {
 setCount(loendama => loe + 1);
]});
 flushSync(() => {
 setStore(poodi => !pood);
});
}

Ülemineku API

Reactis saab kasutajaliideses tehtud värskendusi liigitada kiireloomulisteks ja üleminekuvärskendusi nimetatakse ka mittekiireloomulisteks. Kiireloomulise värskenduse näide võib olla teksti sisestamine väljale, samas kui üleminekuvärskendus võib olla otsingu filtreerimise funktsioon.

Kui sellised värskendused toimuvad samaaegselt, võib seda nimetada raskeks toiminguks ja see võib viia teie rakenduse külmumiseni. Selle probleemi lahendamiseks nimetas ülemineku API siin startTransition tuleb mängima. See uus funktsioon annab Reactile teada, millised värskendused tuleks märkida "üleminekuteks", mis omakorda parandab kasutajate suhtlust. Siin on koodinäidis selle toimimisest;

importida { StartTransition } alates"reageerida";
startTransition(() => {
 setSearch (sisend);
});

Põnevus

Kui rakendus renderdatakse serveris, tagastatakse brauserisse staatiline HTML-fail, mis võimaldab kasutajal näha, kuidas rakendus JavaScripti laadimise ajal välja näeb. Kui fail on laaditud, muutub HTML dünaamiliseks koos nn hüdratatsioon. Puuduseks on see, et kui need kõik pole paigas, ei muutuks teie rakendus interaktiivseks.

Selle probleemi lahendamiseks pakub React 18 kahte uut serveripoolse renderdamise (SSR) funktsiooni, kasutades Põnevus komponent;

  • HTML-i voogesitus võimaldab komponendi osi saata kohe, kui need renderdatakse.
  • Valikuline hüdratsioon seab esikohale kasutaja valitud komponentide interaktiivsuse.

Uued konksud

Üks suur pöördepunkt Reacti jaoks oli kasutuselevõtt konksud Reactis versioon 16, mis võimaldab funktsiooni komponentidel pääseda juurde olekutele ja teistele Reacti funktsioonidele ilma klasse kirjutamata. React 18 tarnitakse viie uue konksuga, et arendajate kogemusi paremaks muuta;

  • useId: see konks võimaldab meil luua meie rakenduses kordumatu identifikaatori (ID) nii serveris kui ka kliendis.
  • useTransition: seda kasutatakse koos startTransition et luua uus olekuvärskendus, mida võib nimetada mittekiireloomuliseks.
  • useDefferedValue: see võimaldab vähem kiireloomulisi värskendusi edasi lükata.
  • useSyncExternalStore: see konks on kasulik väliste andmeallikate tellimuste rakendamisel.
  • useInsertionEffect: see konks on piiratud CSS-in-JS teegi autoritega stiilide sisestamiseks DOM-i.

Kuidas värskendada, et reageerida 18

Värskenduse tegemiseks saab kasutada npm-i või lõngapaketihaldurit, käivitades terminalis järgmise käsu.

npm installida reageerima reageerima-dom

või

lõng lisa react react-dom

Seejärel peate tegema muudatuse index.js faili projekti kausta juurkataloogis pärand-API-st uude juur-API-sse, nagu varem näidatud.

Kuidas luua uus React 18 projekt

Uue React 18 projekti seadistamiseks installitakse pakett loo-react-rakendus koos npm või lõngaga terminalis;

npx luua-react-app my-react-app

või

lisa lõng luua-react-app my-react-app

Parandage oma rakenduse jõudlust Reactiga 18

Nüüd teate mõningatest React 18 uutest funktsioonidest, nagu uus juur-API, Suspense, Transition või Automatic Batching, ning kuidas minna üle uuele versioonile ja seadistada see nullist.

Need hiljutised Reacti muudatused on teile kohe kogemiseks valmis.