Galvojate išbandyti kodavimą naudojant „React“? Čia pateikiamos pagrindinės naujos funkcijos, kurias reikia išbandyti „React 18“.

„React“ yra labai populiari atvirojo kodo „JavaScript“ biblioteka, kurią „Facebook“ sukūrė 2013 m. Dėl savo lankstumo daugelis kūrėjų naudoja kai kurias jo funkcijas kurdami greitus, efektyvius ir daugkartinio naudojimo vartotojo sąsajos (UI) komponentus.

2022 m. kovo mėn. komanda pristatė naujausią ir laukiamą „React“ bibliotekos versiją „React 18“, kurioje yra naujų funkcijų, skirtų programos našumui gerinti.

Naujos „React“ funkcijos 18

React 18 sudaro keletas naudingų naujų funkcijų, pridėtų prie atvirojo kodo JavaScript biblioteka. Daugelio šių pakeitimų nebuvo ankstesnėje versijoje, o kitos funkcijos buvo patobulintos. Kai kurios iš šių funkcijų apima; nauja šakninė API, automatinis paketų keitimas, pereinamasis API, laikinasis API ir naujų kabliukų išleidimas.

Nauja šakninė API

„React“ šakninė API stebi, kaip aukščiausio lygio komponentas pateikiamas medyje. Ankstesnėse React versijose

instagram viewer
pateikti metodas buvo naudojamas atlikti atvaizdavimą, kuris dabar vadinamas senąja šaknine API.

Tačiau „React 18“ turi naują šakninę API, kuri sukuria šaknį naudojant sukurtiRoot metodą, o tada sukuria „React“ komponentą sukurtai šaknyje, naudodama pateikti metodas.

Ši nauja šakninė API suteiks prieigą prie šios naujausios versijos funkcijų, pvz., vėliau aptartos perėjimo API funkcijos. Nors senasis būdas vis dar veiks „React 18“, ateityje jis gali būti palaipsniui panaikintas.

Toliau pateiktame fragmente parodyta, kaip šakninė API yra struktūrizuota tiek senais, tiek naujais būdais.

Legacy Root API

importuoti ReactDOM iš„reagavimas“;
importuoti Programėlė iš„./Programa“;
ReactDOM.render(<Programėlė />, dokumentas.getElementById("programėlė"))

Nauja šakninė API

importuoti ReactDOM iš'react-dom/client';
importuoti Programėlė iš„./Programa“;
konst root = ReactDOM.createRoot(dokumentas.getElementById("programėlė"));
root.render(<Programėlė />)

Automatinis partijų iškrovimas

„React“ paketų sudarymas apima kelis būsenos atnaujinimus vienu pakartotiniu pateikimu kiekviename naršyklės įvykyje, pavyzdžiui, a spustelėkite įvykį. Bet kokie būsenos pakeitimai, įvykę ne įvykyje, pvz., pažadas ar atgalinis skambutis, nebus sugrupuoti.

Naudojant React 18, paketų būsenos atnaujinimai atliekami automatiškai, neatsižvelgiant į tai, kur šie naujinimai įvyksta. Ši funkcija iš karto pagerina našumą ir atvaizdavimo laiką. Tačiau jei turite komponento būseną, kurios nenorite sugrupuoti, galite jos atsisakyti naudodami flushSync metodas. Toliau pateikiamas pavyzdys, kaip tai padaryti;

importuoti { flushSync } iš„reagavimas“;
funkcijarankenaSpustelėkite() {
 flushSync (() => {
 setCount(skaičiuoti => skaičiuoti + 1);
]});
 flushSync (() => {
 setStore(parduotuvė => !parduotuvė);
});
}

Perėjimo API

Programoje „React“ vartotojo sąsajoje atlikti naujinimai gali būti priskirti skubiems, o pereinamieji naujinimai taip pat vadinami neskubiais. Skubios naujinimo pavyzdys gali būti teksto įvedimas į lauką, o perėjimo naujinimas gali būti paieškos filtravimo funkcija.

Dabar, jei tokie atnaujinimai įvyksta vienu metu, tai gali būti vadinama sunkia operacija ir dėl to jūsų programa gali užšaldyti. Kad išspręstų šią problemą, čia perėjimo API pavadino pradėtiPerėjimas ateina pažaisti. Ši nauja funkcija nurodo „React“, kurie naujinimai turėtų būti pažymėti kaip „perėjimai“, o tai pagerina vartotojų sąveiką. Čia yra kodo pavyzdys, kaip jis veikia;

importuoti { startTransition } iš"reaguoti";
startTransition(() => {
 setSearch (įvestis);
});

Įtampa

Kai programa pateikiama serveryje, į naršyklę grąžinamas statinis HTML failas, leidžiantis vartotojui matyti, kaip programa atrodo, kol įkeliama „JavaScript“. Kai failas įkeliamas, HTML tampa dinamiškas ir vadinamas drėkinimas. Trūkumas yra tas, kad jei visa tai nebus įdiegta, jūsų programa netaptų interaktyvi.

Norėdami išspręsti šią problemą, „React 18“ pateikia dvi naujas serverio pusės atvaizdavimo (SSR) funkcijas, naudodamas Įtampa komponentas;

  • Srautinis HTML leidžia siųsti komponento dalis, kai jos pateikiamos.
  • Atrankinis drėkinimas teikia pirmenybę vartotojo pasirinktų komponentų interaktyvumui.

Nauji kabliukai

Vienas didelis „React“ lūžis buvo pristatymas kabliukai React 16 versija, leidžianti funkcijų komponentams pasiekti būsenas ir kitas „React“ funkcijas neįrašant klasių. „React 18“ pristatomas su penkiais naujais kabliukais, kad pagerintų kūrėjų patirtį;

  • useId: šis kabliukas leidžia sukurti unikalų identifikatorių (ID) mūsų programoje tiek serveryje, tiek kliente.
  • useTransition: jis naudojamas kartu pradėtiPerėjimas sukurti naują būsenos naujinį, kurį galima pavadinti neskubiu.
  • useDefferedValue: leidžia atidėti atnaujinimus, kurie yra ne tokie skubūs.
  • useSyncExternalStore: šis kabliukas yra naudingas diegiant išorinių duomenų šaltinių prenumeratas.
  • useInsertionEffect: šis kabliukas skirtas tik CSS-in-JS bibliotekos autoriams, skirtiems stiliams įvesti į DOM.

Kaip atnaujinti, kad reaguotumėte 18

Norėdami atnaujinti, npm arba yarn paketų tvarkyklę galima naudoti terminale paleidus šią komandą.

npm diegti react react-dom

arba

verpalai pridėti react react-dom

Tada turėsite pakeisti index.js failą projekto aplanko šakniniame kataloge iš senosios API į naują šakninę API, kaip parodyta anksčiau.

Kaip sukurti naują „React 18“ projektą

Norint nustatyti naują „React 18“ projektą, terminale įdiegiamas paketas „create-react-app“ su „npm“ arba „yarn“;

npx sukurti-react-app my-react-app

arba

verpalų pridėti sukurti-react-app my-react-app

Pagerinkite programos našumą naudodami React 18

Dabar žinote apie kai kurias naujas „React 18“ funkcijas, pvz., naują šakninę API, „Suspense“, „Transition“ arba „Automatic Batching“, ir kaip atnaujinti į šią naują versiją ir nustatyti ją nuo nulio.

Šiuos naujausius „React“ pakeitimus galite išbandyti jau dabar.