Vai domājat izmēģināt kodēšanu ar React? Šeit ir norādītas galvenās jaunās funkcijas, kuras izmēģināt React 18.

React ir ļoti populāra atvērtā pirmkoda JavaScript bibliotēka, ko Facebook izveidoja 2013. gadā. Pateicoties tās elastībai, daudzi izstrādātāji izmanto dažas tās funkcijas, veidojot ātrus, efektīvus un atkārtoti lietojamus lietotāja interfeisa (UI) komponentus.

2022. gada martā komanda laida klajā jaunāko un gaidīto React bibliotēkas versiju React 18, kurā ir iekļauti jauni līdzekļi, kas vērsti uz lietojumprogrammas veiktspējas uzlabošanu.

Jaunās funkcijas programmā React 18

React 18 sastāv no dažām noderīgām jaunām funkcijām, kas pievienotas atvērtā koda JavaScript bibliotēka. Daudzas no šīm izmaiņām nebija iepriekšējā versijā, savukārt citas funkcijas tika uzlabotas. Dažas no šīm funkcijām ietver; jauna saknes API, automātiskā pakešu veidošana, pārejas API, pagaidu API un jaunu Hooks izlaišana.

Jauna saknes API

Saknes API programmā React seko tam, kā augstākā līmeņa komponents tiek renderēts kokā. Iepriekšējās React versijās

instagram viewer
renderēt metode tika izmantota, lai izpildītu renderēšanu, ko tagad sauc par mantoto saknes API.

Tomēr React 18 ir aprīkots ar jaunu saknes API, kas izveido sakni, izmantojot CreateRoot metodi un pēc tam izveidotajā saknē atveido React komponentu, izmantojot renderēt metodi.

Šī jaunā saknes API nodrošinās piekļuvi šīs jaunākās versijas funkcijām, piemēram, pārejas API funkcijai, kas apspriesta vēlāk. Lai gan React 18 joprojām darbosies vecais veids, nākotnē tas var tikt pakāpeniski atcelts.

Tālāk esošajā fragmentā ir parādīts, kā saknes API ir strukturēta gan mantotajā, gan jaunajā veidā.

Legacy Root API

imports ReactDOM no'react-dom';
imports App no'./Lietotne';
ReactDOM.render(<App />, dokumentu.getElementById("lietotne"))

Jauna saknes API

imports ReactDOM no'react-dom/client';
imports App no'./Lietotne';
konst root = ReactDOM.createRoot(dokumentu.getElementById("lietotne"));
root.render(<App />)

Automātiskā partiju sadale

Pakešu komplektēšana programmā React ietver vairākus stāvokļa atjauninājumus vienā atkārtotā renderēšanā katrā pārlūkprogrammas notikumā, piemēram, a noklikšķiniet uz notikuma. Visas stāvokļa izmaiņas, kas notikušas ārpus notikuma, piemēram, solījums vai atzvanīšana, netiks apvienotas.

Izmantojot React 18, pakešu stāvokļa atjauninājumi tiek veikti automātiski neatkarīgi no tā, kur šie atjauninājumi tiek veikti. Šī funkcija nodrošina veiktspējas un renderēšanas laika uzlabojumus. Tomēr, ja jums ir komponenta statuss, kuru nevēlaties grupēt, varat no tā atteikties, izmantojot flushSync metodi. Tālāk ir sniegts fragmenta paraugs par to, kā to var izdarīt;

imports { flushSync } no'react-dom';
funkcijurokturisNoklikšķiniet() {
 flushSync(() => {
 setCount(skaitīt => skaitīt + 1);
]});
 flushSync(() => {
 setStore(veikals => !veikals);
});
}

Pārejas API

Programmā React lietotāja saskarnē veiktos atjauninājumus var klasificēt kā steidzamus, un pārejas atjauninājumus sauc arī par nesteidzīgiem. Steidzamas atjaunināšanas piemērs var būt teksta ievadīšana laukā, savukārt pārejas atjauninājums varētu būt meklēšanas filtrēšanas funkcionalitāte.

Tagad, ja šādi atjauninājumi notiek vienlaikus, to var saukt par smagu darbību un var izraisīt jūsu lietojumprogrammas iesaldēšanu. Lai atrisinātu šo problēmu, šeit pārejas API sauc par sāktPāreja nāk spēlēt. Šī jaunā funkcija norāda React, kuri atjauninājumi ir jāatzīmē kā "pārejas", savukārt uzlabojot lietotāju mijiedarbību. Šeit ir koda paraugs, kā tas darbojas;

imports { startTransition } no"reaģēt";
startTransition(() => {
 setSearch (ievade);
});

Neziņa

Kad lietojumprogramma tiek renderēta serverī, pārlūkprogrammā tiek atgriezts statisks HTML fails, kas ļauj lietotājam redzēt, kā programma izskatās, kamēr tiek ielādēts JavaScript. Kad fails tiek ielādēts, HTML kļūst dinamisks ar tā dēvēto hidratācija. Trūkums ir tāds, ka, ja tie visi nav izveidoti, jūsu lietojumprogramma nekļūs interaktīva.

Lai atrisinātu šo problēmu, React 18 nodrošina divus jaunus servera puses renderēšanas (SSR) līdzekļus, izmantojot Neziņa komponents;

  • Straumēšana HTML ļauj nosūtīt komponenta daļas, tiklīdz tās tiek renderētas.
  • Selektīva hidratācija piešķir prioritāti lietotāja izvēlēto komponentu interaktivitātei.

Jauni āķi

Viens liels pagrieziena punkts React bija ieviešana āķi React 16. versija, kas ļauj funkciju komponentiem piekļūt stāvokļiem un citiem React līdzekļiem, neierakstot klases. React 18 tiek piegādāts ar pieciem jauniem āķiem, lai uzlabotu izstrādātāju pieredzi;

  • useId: šis āķis ļauj mums izveidot unikālu identifikatoru (ID) mūsu lietojumprogrammā gan serverī, gan klientā.
  • useTransition: tiek izmantots līdzās sāktPāreja lai izveidotu jaunu stāvokļa atjauninājumu, ko var saukt par nesteidzamu.
  • useDefferedValue: tas ļauj atlikt atjauninājumus, kas nav tik steidzami.
  • useSyncExternalStore: šis āķis ir noderīgs, ieviešot ārējo datu avotu abonementus.
  • useInsertionEffect: šis āķis ir paredzēts tikai CSS-in-JS bibliotēkas autoriem, lai ievadītu stilus DOM.

Kā atjaunināt, lai reaģētu 18

Lai veiktu atjaunināšanu, npm vai yarn pakotņu pārvaldnieku var izmantot, terminālī izpildot šādu komandu.

npm uzstādīt reaģēt react-dom

vai

dzija pievienot react react-dom

Pēc tam jums būs jāveic izmaiņas index.js failu projekta mapes saknes direktorijā no mantotās API uz jauno saknes API, kā parādīts iepriekš.

Kā izveidot jaunu React 18 projektu

Lai iestatītu jaunu React 18 projektu, tiek instalēta pakotne Create-react-app ar npm vai dziju terminālī;

npx izveidot-react-app my-react-app

vai

dziju pievienot izveidot-react-app my-react-app

Uzlabojiet savas lietojumprogrammas veiktspēju, izmantojot React 18

Tagad jūs zināt par dažām jaunām React 18 funkcijām, piemēram, jauno saknes API, Suspense, Transition vai Automatic Batching, un to, kā jaunināt uz šo jauno versiju un iestatīt to no jauna.

Šīs nesenās izmaiņas pakalpojumā React ir gatavas jums piedzīvot tūlīt.