Ilgai lauktas React v18 pagaliau buvo išleistas prieš kelis mėnesius. Nors didelių pakeitimų nebuvo, buvo pridėta keletas įdomių funkcijų, į kurias verta atkreipti dėmesį. Šiame straipsnyje bus aptariami kai kurie nauji papildymai ir kaip atnaujinti į React v18.

Kaip atnaujinti reaguoti 18

Norėdami įdiegti naujausią React versiją, paleiskite šią komandą terminale:

npm diegti react react-dom

Arba jei naudojate verpalus:

verpalai pridėti react react-dom

Įdiegę naujausią versiją galite pradėti naudotis naujomis jos funkcijomis.

React 18 yra keletas papildymų; čia yra keturi iš labiausiai dėmesio vertų.

1. Griežtas režimas

StrictMode yra funkcija, kurią galite naudoti norėdami pabrėžti galimas programos problemas. Griežtos režimo patikros vykdomos tik kūrimo režimu ir neturės įtakos gamybos versijai. Tačiau jie gali būti labai naudingi nustatant galimas kodo problemas.

Galite įjungti griežtą režimą bet kuriai programos daliai. Pavyzdžiui, galite jį įjungti visiems savo komponentams arba tik kai kuriems iš jų.

instagram viewer 
importuoti Reaguoti iš „reaguoti“;
funkcijaDemoPavyzdys() {
grąžinti (
<div>
<Pirmas komponentas />
<Reaguoti. Griežtas režimas>
<Antrasis komponentas />
<Trečias komponentas />
</React.StrictMode>
<Ketvirtasis komponentas />
</div>
 );
}

Aukščiau pateiktame kode visi keturi komponentai bus patikrinti, ar nėra galimų problemų. Tačiau griežtos režimo patikros bus taikomos tik ir .

StrictMode taip pat padeda kitais būdais, pavyzdžiui:

  • Nesaugių gyvavimo ciklų komponentų nustatymas: Jei komponentas turi gyvavimo ciklo metodą, kuris pažymėtas kaip nesaugus, griežtas režimas jus apie tai įspės.
  • Įspėjimas apie pasenusios eilutės ref API naudojimą: Jei naudojate pasenusią string ref API, griežtas režimas įspės apie jos naudojimą.
  • Įspėjimas apie nebenaudojamą findDOMNode naudojimą: Jei naudojate nebenaudojamą findDOMNode API, griežtas režimas jus apie tai įspės.
  • Netikėto šalutinio poveikio aptikimas: Jei komponentas netikėtose vietose sukelia šalutinį poveikį (pvz., setState), griežtas režimas jus apie tai įspės.
  • Pasenusio konteksto API aptikimas: Jei naudojate pasenusią konteksto API (kuri dabar nebenaudojama), griežtas režimas jus apie tai įspės.
  • Daugkartinio naudojimo būsenos užtikrinimas: Jei turite būseną, kurią naudoja keli komponentai, griežtas režimas padės užtikrinti, kad ji būtų tinkamai sinchronizuota.

Apskritai griežtas režimas gali būti naudinga kuriant funkciją, padedanti nustatyti galimas kodo problemas.

2. Perėjimai

Perėjimai leidžia pažymėti tam tikrus vartotojo sąsajos naujinius kaip neskubus. Tai reiškia, kad „React“ gali teikti pirmenybę kitiems svarbesniems naujinimams.

Pavyzdžiui, jei turite du teksto laukus – vieną paieškos užklausai, kitą – jos rezultatams, paieškos rezultatų teksto lauką norėsite pažymėti kaip perėjimą. Tokiu būdu „React“ žino, kad jai nereikia skubiai iš naujo pateikti to teksto lauko kiekvieną kartą, kai vartotojas ką nors įveda paieškos užklausos teksto lauke.

Norėdami pažymėti vartotojo sąsajos naujinį kaip perėjimą, galite naudoti funkciją startTransition. Štai pavyzdys:

importuoti { startTransition } iš „reaguoti“;
startTransition(() => {
// Pažymėkite visus neskubius būsenos atnaujinimus viduje kaip perėjimus
});

Šis kodas pažymėtų visus būsenos atnaujinimus funkcijoje startTransition kaip perėjimus. Tokiu būdu „React“ gali sutelkti dėmesį į kitus svarbesnius vartotojo sąsajos atnaujinimus.

3. Automatinis partijų iškrovimas

„React“ suteikia naudingą funkciją, vadinamą paketavimu, kuri sumažina pakartotinių pateikimų skaičių, kai pasikeičia būsena. Tai gali būti labai naudinga optimizuojant našumą, ypač kai darbas su asinchroniniu kodu.

Anksčiau, jei žadėjote arba skambinote į tinklą, būsenos naujinimai nebuvo kaupiami ir „React“ turėjo būti pateikta kelis kartus iš naujo. Tačiau naudojant „React 18“ automatinį paketų tvarkymą, visi būsenos naujinimai yra sugrupuojami, net ir pažadų, setTimeouts ir įvykių atgalinių iškvietimų ribose. Tai žymiai sumažina darbą, kurį „React“ turi atlikti fone.

Naudodami flushSync funkciją galite rankiniu būdu atnaujinti būsenos paketus, tačiau nuo React 18 šis procesas dabar yra automatinis. Dėl to našumas yra daug geresnis, nes „React“ palauks, kol bus baigta mikro užduotis, prieš atlikdama iš naujo.

4. Nauji kabliukai

18 versija pristato daug naujų Reaguoti kabliukai, įskaitant useId, useTransition ir useDeferredValue. Šie nauji „Hooks“ yra puikus būdas pridėti papildomų „React“ programų funkcijų su minimaliomis pastangomis.

„React 18“ užtikrina didesnį programos našumą

„React 18“ yra čia, ir ji suteikia puikių žiniatinklio programų našumo patobulinimų. Naudodami naująją „React“ versiją galite lengvai kurti žiniatinklio programas, kurios labiau reaguoja ir veikia geriau. Taigi, jei norite sukurti žiniatinklio programą, kuri veiktų sklandžiai ir atrodytų puikiai, būtinai peržiūrėkite „React 18“.