Ilgi gaidītais React v18 beidzot tika izlaists pirms dažiem mēnešiem. Lai gan lielu izmaiņu nebija, tika pievienotas dažas interesantas funkcijas, kuras ir vērts apskatīt. Šajā rakstā tiks apskatīti daži jauni papildinājumi un jaunināšana uz React v18.

Kā jaunināt uz React 18

Lai instalētu jaunāko React versiju, terminālī palaidiet šo komandu:

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

Vai arī, ja izmantojat dziju:

dzija pievienot react react-dom

Kad esat instalējis jaunāko versiju, varat sākt izmantot tās jauno funkciju priekšrocības.

React 18 ir vairāki papildinājumi; šeit ir četri visievērojamākie.

1. Stingrs režīms

StrictMode ir funkcija, ko varat izmantot, lai izceltu iespējamās problēmas lietojumprogrammā. Stingras režīma pārbaudes tiek veiktas tikai izstrādes režīmā un neietekmēs ražošanas versiju. Tomēr tie var būt ļoti noderīgi, lai identificētu iespējamās problēmas jūsu kodā.

Varat iespējot stingro režīmu jebkurai lietojumprogrammas daļai. Piemēram, varat to iespējot visiem saviem komponentiem vai tikai dažiem no tiem.

imports Reaģēt no "reaģēt";
funkcijuDemoPiemērs() {
atgriezties (
<div>
<FirstComponent />
<Reaģēt. StrictMode>
<Otrais komponents />
<Trešais komponents />
</React.StrictMode>
<Ceturtais komponents />
</div>
 );
}

Iepriekš minētajā kodā visas četras sastāvdaļas tiks pārbaudītas, vai nav iespējamas problēmas. Tomēr stingras režīma pārbaudes attieksies tikai uz un .

StrictMode palīdz arī citos veidos, piemēram:

  • Sastāvdaļu identificēšana ar nedrošiem dzīves cikliem: Ja komponentam ir dzīves cikla metode, kas ir atzīmēta kā nedroša, stingrais režīms jūs par to brīdinās.
  • Brīdinājums par mantotās virknes ref API izmantošanu: Ja izmantojat mantoto virknes ref API, stingrais režīms brīdinās par tā izmantošanu.
  • Brīdinājums par novecojušu findDOMNode lietojumu: Ja izmantojat novecojušu findDOMNode API, stingrais režīms jūs par to brīdinās.
  • Negaidītu blakusparādību noteikšana: Ja komponents neparedzētās vietās izraisa blakusparādības (piemēram, setState), stingrais režīms jūs par to brīdinās.
  • Mantotā konteksta API noteikšana: Ja izmantojat mantoto konteksta API (kas tagad ir novecojusi), stingrais režīms jūs par to brīdinās.
  • Atkārtoti lietojama stāvokļa nodrošināšana: Ja jums ir stāvoklis, ko izmanto vairāki komponenti, stingrais režīms palīdzēs nodrošināt tā pareizu sinhronizāciju.

Kopumā stingrais režīms var būt noderīga izstrādes funkcija, kas palīdz identificēt iespējamās problēmas jūsu kodā.

2. Pārejas

Pārejas ļauj atzīmēt noteiktus lietotāja interfeisa atjauninājumus kā nesteidzamus. Tas nozīmē, ka React var piešķirt prioritāti citiem svarīgākiem atjauninājumiem.

Piemēram, ja jums ir divi teksta lauki — viens meklēšanas vaicājumam un otrs tā rezultātiem, meklēšanas rezultātu teksta lauku vēlaties atzīmēt kā pāreju. Tādā veidā React zina, ka tai nav steidzami atkārtoti jārenderē šis teksta lauks katru reizi, kad lietotājs kaut ko ieraksta meklēšanas vaicājuma teksta laukā.

Varat izmantot funkciju startTransition, lai atzīmētu lietotāja interfeisa atjauninājumu kā pāreju. Šeit ir piemērs:

imports { startTransition } no "reaģēt";
startTransition(() => {
// Atzīmējiet visus nesteidzamos stāvokļa atjauninājumus iekšā kā pārejas
});

Šis kods visus stāvokļa atjauninājumus funkcijā startTransition atzīmētu kā pārejas. Tādā veidā React var koncentrēties uz citiem svarīgākiem lietotāja interfeisa atjauninājumiem.

3. Automātiskā partiju sadale

React nodrošina noderīgu līdzekli, ko sauc par pakešu kārtošanu, kas samazina atkārtotu renderēšanas gadījumu skaitu, mainoties stāvoklim. Tas var būt ļoti noderīgi, lai optimizētu veiktspēju, it īpaši, ja darbs ar asinhrono kodu.

Iepriekš, ja jums bija solījums vai veicat tīkla zvanu, stāvokļa atjauninājumi netika apvienoti un React bija jāatkārto vairākas reizes. Tomēr, izmantojot React 18 automātisko pakešu kārtošanu, visi stāvokļa atjauninājumi tiek grupēti pat solījumu, setTimeouts un notikumu atzvanīšanas ietvaros. Tas ievērojami samazina darbu, kas React ir jādara fonā.

Varat manuāli pakeš stāvokļa atjauninājumus, izmantojot funkciju flushSync, taču no React 18 šis process tagad ir automātisks. Tādējādi tiek nodrošināta daudz labāka veiktspēja, jo React gaidīs mikrouzdevuma pabeigšanu pirms atkārtotas renderēšanas.

4. Jauni āķi

18. versija ievieš daudz jaunu Reaģēt āķi, tostarp useId, useTransition un useDeferredValue. Šie jaunie āķi nodrošina lielisku veidu, kā ar minimālu piepūli pievienot React lietotnēm papildu funkcionalitāti.

React 18 nodrošina palielinātu lietotņu veiktspēju

React 18 ir klāt, un tas sniedz dažus lieliskus tīmekļa lietotņu veiktspējas uzlabojumus. Izmantojot jauno React versiju, varat viegli izveidot tīmekļa lietotnes, kas ir atsaucīgākas un kopumā darbojas labāk. Tātad, ja vēlaties izveidot tīmekļa lietotni, kas darbojas nevainojami un izskatās lieliski, noteikti pārbaudiet React 18.