Mult așteptatul React v18 a fost lansat în sfârșit cu câteva luni în urmă. Deși nu au existat modificări majore, au fost adăugate câteva caracteristici interesante care merită să le aruncați o privire. Acest articol va prezenta câteva completări noi și cum să faceți upgrade la React v18.

Cum să faceți upgrade la React 18

Pentru a instala cea mai recentă versiune de React, rulați această comandă într-un terminal:

npm instalare reacționează reac-dom

Sau dacă folosești fire:

yarn add react react-dom

După ce ați instalat cea mai recentă versiune, puteți începe să profitați de noile sale funcții.

Există mai multe completări în React 18; iată patru dintre cele mai remarcabile.

1. Modul strict

StrictMode este o caracteristică pe care o puteți folosi pentru a evidenția probleme potențiale dintr-o aplicație. Verificările stricte ale modului rulează numai în modul de dezvoltare și nu vor afecta construcția de producție. Cu toate acestea, ele pot fi foarte utile în identificarea problemelor potențiale din codul dvs.

instagram viewer

Puteți activa modul strict pentru orice parte a aplicației dvs. De exemplu, îl puteți activa pentru toate componentele dvs. sau doar pentru unele dintre ele.

import Reacţiona din 'reacţiona';
funcţieDemoExample() {
întoarcere (
<div>
<Prima componentă />
<Reacţiona. StrictMode>
<A doua componentă />
<Componenta a treia />
</React.StrictMode>
<A patra componentă />
</div>
 );
}

În codul de mai sus, toate cele patru componente ar fi verificate pentru eventuale probleme. Cu toate acestea, verificările stricte ale modului se vor aplica numai la și .

StrictMode ajută și în alte moduri, cum ar fi:

  • Identificarea componentelor cu cicluri de viață nesigure: Dacă o componentă are o metodă de ciclu de viață care este marcată ca nesigură, modul strict vă va avertiza despre aceasta.
  • Avertisment despre utilizarea API-ului de referință șir vechi: Dacă utilizați API-ul de referință șir moștenit, modul strict vă va avertiza despre utilizarea acestuia.
  • Avertisment despre utilizarea findDOMNode depreciată: Dacă utilizați API-ul findDOMNode învechit, modul strict vă va avertiza cu privire la aceasta.
  • Detectarea efectelor secundare neașteptate: Dacă o componentă declanșează efecte secundare (cum ar fi setState) în locuri neașteptate, modul strict vă va avertiza despre aceasta.
  • Detectarea API-ului context moștenit: Dacă utilizați API-ul de context moștenit (care acum este depreciat), modul strict vă va avertiza în acest sens.
  • Asigurarea stării de reutilizare: Dacă aveți o stare care este utilizată de mai multe componente, modul strict vă va ajuta să vă asigurați că este sincronizat corespunzător.

În general, modul strict poate fi o caracteristică utilă în dezvoltare pentru a ajuta la identificarea potențialelor probleme din codul dvs.

2. Tranziții

Tranzițiile vă permit să marcați anumite actualizări ale UI ca neurgente. Aceasta înseamnă că React poate prioritiza alte actualizări care sunt mai importante.

De exemplu, dacă aveți două câmpuri de text - unul pentru o interogare de căutare și unul pentru rezultatele acesteia - doriți să marcați câmpul de text cu rezultatele căutării ca o tranziție. În acest fel, React știe că nu trebuie să redă urgent acel câmp de text de fiecare dată când utilizatorul tasta ceva în câmpul de text al interogării de căutare.

Puteți utiliza funcția startTransition pentru a marca o actualizare a interfeței de utilizare ca tranziție. Iată un exemplu:

import { startTransition } din 'reacţiona';
startTransition(() => {
// Marcați orice actualizări de stare care nu sunt urgente în interior ca tranziții
});

Acest cod ar marca toate actualizările de stare din funcția startTransition ca tranziții. În acest fel, React se poate concentra pe alte actualizări mai importante ale UI.

3. Loturi automate

React oferă o caracteristică utilă numită loturi, care reduce numărul de redări care au loc atunci când o stare se schimbă. Acest lucru poate fi foarte util în optimizarea performanței, în special atunci când lucrul cu cod asincron.

Anterior, dacă ați avut o promisiune sau ați efectua un apel de rețea, actualizările de stare nu ar fi fost grupate, iar React ar trebui să fie redat din nou de mai multe ori. Cu toate acestea, cu lotizarea automată în React 18, toate actualizările de stare sunt grupate, chiar și în cadrul promisiunilor, setTimeouts și apelback-uri de evenimente. Acest lucru reduce semnificativ munca pe care React trebuie să o facă în fundal.

Puteți să acumulați manual actualizări de stare utilizând funcția flushSync, dar începând cu React 18, acest proces este acum automat. Acest lucru are ca rezultat o performanță mult mai bună, deoarece React va aștepta ca o micro-sarcină să se termine înainte de a re-renda.

4. Cârlige noi

Versiunea 18 introduce multe noi Cârlige de reacție, inclusiv useId, useTransition și useDeferredValue. Aceste noi Hooks oferă o modalitate excelentă de a adăuga funcționalitate suplimentară aplicațiilor dvs. React cu un efort minim.

React 18 oferă o performanță sporită a aplicației

React 18 este aici și aduce cu sine câteva îmbunătățiri grozave ale performanței aplicației web. Cu noua versiune de React, puteți crea cu ușurință aplicații web care sunt mai receptive și au performanțe generale mai bune. Deci, dacă doriți să creați o aplicație web care să funcționeze fără probleme și să arate grozav, asigurați-vă că consultați React 18.