Pred pár mesiacmi konečne vyšiel dlho očakávaný React v18. Aj keď nedošlo k žiadnym zásadným zmenám, pribudlo niekoľko zaujímavých funkcií, ktoré stoja za pozornosť. Tento článok sa bude zaoberať niektorými novými doplnkami a tým, ako upgradovať na React v18.

Ako upgradovať na React 18

Ak chcete nainštalovať najnovšiu verziu Reactu, spustite tento príkaz v termináli:

npm Inštalácia reagovať reagovať-dom

Alebo ak používate priadzu:

priadza pridať reagovať reagovať-dom

Po nainštalovaní najnovšej verzie môžete začať využívať jej nové funkcie.

V React 18 je niekoľko dodatkov; tu sú štyri najpozoruhodnejšie.

1. Prísny režim

StrictMode je funkcia, ktorú môžete použiť na zvýraznenie potenciálnych problémov v aplikácii. Kontroly prísneho režimu prebiehajú iba v režime vývoja a neovplyvnia produkčnú zostavu. Môžu však byť veľmi užitočné pri identifikácii potenciálnych problémov vo vašom kóde.

Prísny režim môžete povoliť pre ktorúkoľvek časť vašej aplikácie. Môžete ho napríklad povoliť pre všetky vaše komponenty alebo len pre niektoré z nich.

instagram viewer 
importovať Reagovať od 'reagovať';
funkciuDemoPríklad() {
vrátiť (
<div>
<FirstComponent />
<Reagovať. StrictMode>
<SecondComponent />
<Tretí komponent />
</React.StrictMode>
<Štvrtý komponent />
</div>
 );
}

Vo vyššie uvedenom kóde by sa všetky štyri komponenty skontrolovali na potenciálne problémy. Prísne kontroly režimu sa však budú vzťahovať iba na a .

StrictMode pomáha aj inými spôsobmi, ako napríklad:

  • Identifikácia komponentov s nebezpečným životným cyklom: Ak má komponent spôsob životného cyklu, ktorý je označený ako nebezpečný, prísny režim vás na to upozorní.
  • Upozornenie na použitie staršieho reťazca ref API: Ak používate staršie reťazcové ref API, prísny režim vás upozorní na jeho použitie.
  • Upozornenie na zastarané používanie findDOMNode: Ak používate zastarané findDOMNode API, prísny režim vás na to upozorní.
  • Detekcia neočakávaných vedľajších účinkov: Ak komponent spúšťa vedľajšie účinky (napríklad setState) na neočakávaných miestach, prísny režim vás na to upozorní.
  • Detekcia staršieho kontextového rozhrania API: Ak používate staršie kontextové API (ktoré je teraz zastarané), prísny režim vás na to upozorní.
  • Zabezpečenie opätovne použiteľného stavu: Ak máte stav, ktorý používa viacero komponentov, prísny režim vám pomôže zabezpečiť jeho správnu synchronizáciu.

Celkovo môže byť prísny režim užitočnou funkciou vo vývoji, ktorá vám pomôže identifikovať potenciálne problémy vo vašom kóde.

2. Prechody

Prechody vám umožňujú označiť určité aktualizácie používateľského rozhrania ako neurgentné. To znamená, že React môže uprednostniť ďalšie aktualizácie, ktoré sú dôležitejšie.

Ak máte napríklad dve textové polia – jedno pre vyhľadávací dotaz a druhé pre jeho výsledky – budete chcieť označiť textové pole výsledkov vyhľadávania ako prechodové. Týmto spôsobom React vie, že nemusí naliehavo znova vykresľovať textové pole zakaždým, keď používateľ zadá niečo do textového poľa vyhľadávacieho dopytu.

Na označenie aktualizácie používateľského rozhrania ako prechodu môžete použiť funkciu startTransition. Tu je príklad:

importovať { startTransition } od 'reagovať';
startTransition(() => {
// Označte všetky aktualizácie stavu, ktoré nie sú naliehavé, ako prechody
});

Tento kód by označil všetky aktualizácie stavu vo funkcii startTransition ako prechody. React sa tak môže sústrediť na ďalšie dôležitejšie aktualizácie používateľského rozhrania.

3. Automatické dávkovanie

React poskytuje užitočnú funkciu nazývanú dávkovanie, ktorá znižuje počet opakovaných vykreslení, ktoré sa uskutočnia pri zmene stavu. To môže byť veľmi užitočné pri optimalizácii výkonu, najmä keď práca s asynchrónnym kódom.

Predtým, ak ste mali prísľub alebo ste uskutočňovali sieťový hovor, aktualizácie stavu by sa nedávkovali a React by sa musel viackrát vykresľovať. Avšak s automatickým dávkovaním v React 18 sú všetky aktualizácie stavu dávkované, dokonca aj v rámci prísľubov, nastavených časových limitov a spätných volaní udalostí. To výrazne znižuje prácu, ktorú musí React robiť na pozadí.

Aktualizácie stavu môžete dávkovať manuálne pomocou funkcie flushSync, ale od React 18 je tento proces teraz automatický. Výsledkom je oveľa lepší výkon, pretože React počká na dokončenie mikroúlohy pred opätovným vykreslením.

4. Nové háčiky

Verzia 18 prináša veľa noviniek Reagovať háčikyvrátane useId, useTransition a useDeferredValue. Tieto nové háčiky poskytujú skvelý spôsob, ako pridať ďalšie funkcie do vašich aplikácií React s minimálnym úsilím.

Reagovať 18 Prináša zvýšený výkon aplikácie

React 18 je tu a prináša so sebou niekoľko skvelých vylepšení výkonu webovej aplikácie. S novou verziou Reactu môžete jednoducho vytvárať webové aplikácie, ktoré sú pohotovejšie a celkovo fungujú lepšie. Ak teda chcete vytvoriť webovú aplikáciu, ktorá funguje hladko a vyzerá skvele, určite si pozrite React 18.