Néhány hónapja végre megjelent a régóta várt React v18. Bár nem történt jelentős változás, néhány érdekes funkció került hozzáadásra, amelyeket érdemes megnézni. Ez a cikk néhány új kiegészítést és a React v18-ra való frissítését ismerteti.

A React frissítésének módja 18

A React legújabb verziójának telepítéséhez futtassa ezt a parancsot egy terminálon:

npm telepítés react react-dom

Vagy ha fonalat használ:

fonal add react react-dom

Miután telepítette a legújabb verziót, elkezdheti kihasználni annak új funkcióit.

A React 18 számos kiegészítést tartalmaz; itt van a négy legfigyelemreméltóbb.

1. Szigorú mód

A StrictMode egy olyan funkció, amellyel kiemelheti az alkalmazás lehetséges problémáit. A szigorú mód-ellenőrzések csak fejlesztési módban futnak, és nincsenek hatással az éles verzióra. Azonban nagyon hasznosak lehetnek a kód lehetséges hibáinak azonosításában.

Az alkalmazás bármely részén engedélyezheti a szigorú módot. Például engedélyezheti az összes összetevőjéhez, vagy csak néhányhoz.

import Reagál tól től 'reagál';
funkcióDemoPélda() {
Visszatérés (
<div>
<FirstComponent />
<Reagál. StrictMode>
<Második komponens />
<Harmadik komponens />
</React.StrictMode>
<Negyedik komponens />
</div>
 );
}

A fenti kódban mind a négy összetevőt ellenőrizni kell a lehetséges problémák szempontjából. A szigorú mód-ellenőrzések azonban csak a és .

A StrictMode más módon is segít, például:

  • A nem biztonságos életciklusú alkatrészek azonosítása: Ha egy összetevő életciklus-módszere nem biztonságos, a szigorú mód figyelmeztetni fogja Önt.
  • Figyelmeztetés a régebbi string ref API használatára vonatkozóan: Ha a legacy string ref API-t használja, a szigorú mód figyelmezteti a használatára.
  • Figyelmeztetés a findDOMNode elavult használatára vonatkozóan: Ha az elavult findDOMNode API-t használja, a szigorú mód figyelmezteti Önt erre.
  • Váratlan mellékhatások észlelése: Ha egy összetevő váratlan helyeken mellékhatásokat vált ki (például setState), a szigorú mód figyelmezteti Önt erre.
  • Örökös kontextus API észlelése: Ha a régi kontextus API-t használja (amely már elavult), a szigorú mód figyelmezteti Önt erre.
  • Az újrafelhasználható állapot biztosítása: Ha olyan állapota van, amelyet több összetevő is használ, a szigorú mód segít biztosítani a megfelelő szinkronizálást.

Összességében a szigorú mód hasznos szolgáltatás lehet a fejlesztés során, amely segít azonosítani a kódban előforduló lehetséges problémákat.

2. Átmenetek

Az átmenetek lehetővé teszik bizonyos felhasználói felület-frissítések nem sürgősként való megjelölését. Ez azt jelenti, hogy a React előnyben részesítheti a fontosabb frissítéseket.

Ha például két szövegmezővel rendelkezik – egy a keresési lekérdezéshez, egy pedig az eredményekhez –, érdemes a keresési eredmények szövegmezőjét átmenetként megjelölni. Így a React tudja, hogy nem kell sürgősen újra renderelnie a szövegmezőt minden alkalommal, amikor a felhasználó beír valamit a keresési lekérdezés szövegmezőjébe.

A startTransition függvény segítségével átmenetként jelölheti meg a felhasználói felület frissítését. Íme egy példa:

import { startTransition } tól től 'reagál';
startTransition(() => {
// A benne lévő nem sürgős állapotfrissítéseket átmenetként jelölje meg
});

Ez a kód átmenetként jelöli meg a startTransition függvényen belüli összes állapotfrissítést. Így a React más fontosabb felhasználói felület-frissítésekre összpontosíthat.

3. Automatikus adagolás

A React egy hasznos szolgáltatást, az úgynevezett kötegelést biztosít, amely csökkenti az állapot megváltozásakor végrehajtott újramegjelenítések számát. Ez nagyon hasznos lehet a teljesítmény optimalizálása során, különösen akkor, ha aszinkron kóddal dolgozik.

Korábban, ha ígéretet tett vagy hálózati hívást kezdeményezett, az állapotfrissítések nem lettek köteggelve, és a Reactnak többször újra kellett renderelnie. A React 18 automatikus kötegelésénél azonban minden állapotfrissítés kötegelt, még az ígéreteken, a setTimeoutokon és az esemény-visszahívásokon belül is. Ez jelentősen csökkenti a React-nak a háttérben végzett munkáját.

A flushSync funkció használatával manuálisan kötegelt állapotfrissítéseket végezhet, de a React 18-tól kezdve ez a folyamat már automatikus. Ez sokkal jobb teljesítményt eredményez, mivel a React megvárja a mikrofeladat befejezését, mielőtt újrarenderelné.

4. Új horgok

A 18-as verzió sok újdonságot tartalmaz Reagálás horgok, beleértve a useId-t, a useTransition-t és a useDeferredValue-t. Ezek az új Hook-ok nagyszerű módot kínálnak arra, hogy minimális erőfeszítéssel extra funkciókat adjon a React alkalmazásaihoz.

A React 18 megnövelt alkalmazásteljesítményt biztosít

Megérkezett a React 18, és néhány nagyszerű fejlesztést hoz a webalkalmazások teljesítményében. A React új verziójával könnyedén hozhat létre olyan webalkalmazásokat, amelyek jobban reagálnak és általánosságban jobban teljesítenek. Ha tehát olyan webalkalmazást szeretne létrehozni, amely zökkenőmentesen fut és jól néz ki, feltétlenül nézze meg a React 18-at.