Gondolkozik azon, hogy kipróbálja a kódolást a React segítségével? Íme, a React 18 legfontosabb új funkciói.

A React egy nagyon népszerű nyílt forráskódú JavaScript-könyvtár, amelyet a Facebook hozott létre 2013-ban. Rugalmasságának köszönhetően sok fejlesztő hasznosítja egyes funkcióit gyors, hatékony és újrafelhasználható felhasználói felület (UI) összetevők létrehozásában.

2022 márciusában a csapat elindította a React könyvtár legújabb és várt verzióját, a React 18-at, amely új funkciókat tartalmaz, amelyek az alkalmazás teljesítményének javítására összpontosítanak.

A React új szolgáltatásai 18

A React 18 néhány hasznos új funkciót tartalmaz a nyílt forráskódú JavaScript könyvtár. A változtatások közül sok nem volt az előző verzióban, míg más funkciókat továbbfejlesztettek. Néhány ilyen funkció a következőket tartalmazza: egy új gyökér API, Automatic Batching, Transition API, Suspense API és új Hooks kiadás.

Új Root API

A React gyökér API nyomon követi, hogy a legfelső szintű összetevő hogyan jelenik meg a fában. A React korábbi verzióiban a

instagram viewer
Vakol metódust használták a renderelés végrehajtására, amelyet ma legacy root API-nak neveznek.

A React 18 azonban egy új root API-val érkezik, amely a gyökér használatával hoz létre egy gyökérkönyvtárat CreateRoot metódussal, majd egy React komponenst jelenít meg a létrehozott gyökérnek a segítségével Vakol módszer.

Ez az új gyökér API hozzáférést biztosít a legújabb verzió szolgáltatásaihoz, például a később tárgyalt átmeneti API-funkcióhoz. Bár a régi módszer továbbra is működik a React 18-ban, a jövőben fokozatosan megszűnhet.

Az alábbi részlet bemutatja, hogyan épül fel a gyökér API mind a régi, mind az új módokon.

Legacy Root API

import ReactDOM tól től'react-dom';
import App tól től'./Alkalmazás';
ReactDOM.render(<App />, dokumentum.getElementById("alkalmazás"))

Új Root API

import ReactDOM tól től'react-dom/client';
import App tól től'./Alkalmazás';
const root = ReactDOM.createRoot(dokumentum.getElementById("alkalmazás"));
root.render(<App />)

Automatikus adagolás

A kötegelés a Reactban több állapotfrissítést foglal magában egyetlen újrarendereléssel minden böngészőeseménynél, például a kattintson az eseményre. Az eseményen kívül bekövetkezett állapotváltozások, például ígéret vagy visszahívás, nem kerülnek kötegelésre.

A React 18 esetén a kötegelt állapotfrissítések automatikusan megtörténnek, függetlenül attól, hogy a frissítések hol történnek. Ez a funkció már a dobozból javítja a teljesítményt és a renderelési időt. Ha azonban olyan összetevőállapota van, amelyet nem szeretne kötegelni, akkor a következő használatával leiratkozhat belőle flushSync módszer. Az alábbiakban egy mintarészlet látható, hogyan lehet ezt megtenni;

import { flushSync } tól től'react-dom';
funkciófogantyúKattintson() {
 flushSync(() => {
 setCount(számol => számol + 1);
]});
 flushSync(() => {
 setStore(bolt => !bolt);
});
}

Átmeneti API

A React alkalmazásban a felhasználói felületen végrehajtott frissítések sürgős kategóriába sorolhatók, az átmeneti frissítéseket pedig nem sürgősnek is nevezik. A sürgős frissítésre példa lehet egy szöveg bevitele egy mezőbe, míg az átmeneti frissítés egy keresési szűrési funkció lehet.

Ha az ilyen frissítések egyidejűleg történnek, azt nehéz műveletnek nevezhetjük, és az alkalmazás lefagyásához vezethet. A probléma megoldása érdekében az átmeneti API itt a startTransition jön játszani. Ez az új funkció tájékoztatja a Reactot, hogy mely frissítéseket kell „átmenetként” megjelölni, ezzel pedig javítva a felhasználói interakciókat. Itt van egy kódminta a működéséről;

import { startTransition } tól től"reagál";
startTransition(() => {
 setSearch (bemenet);
});

Suspense

Amikor egy alkalmazás megjelenik a szerveren, egy statikus HTML-fájl kerül vissza a böngészőbe, amely lehetővé teszi a felhasználó számára, hogy lássa, hogyan néz ki az alkalmazás a JavaScript betöltése közben. Amikor a fájl betöltődik, a HTML dinamikussá válik az úgynevezett hidratáció. A hiányosság itt az, hogy ha mindezek nincsenek a helyükön, az alkalmazás nem válik interaktívvá.

A probléma megoldására a React 18 két új szerveroldali renderelési (SSR) szolgáltatást biztosít a Suspense összetevő;

  • A HTML streamelése lehetővé teszi az összetevők darabjainak elküldését a megjelenítésükkor.
  • A szelektív hidratálás a felhasználó által kiválasztott összetevők interaktivitását helyezi előtérbe.

Új horgok

A React egyik nagy fordulópontja a bevezetése volt horgok a Reactban 16-os verzió, amely lehetővé teszi a függvénykomponensek számára, hogy osztályok írása nélkül hozzáférjenek az állapotokhoz és más React-szolgáltatásokhoz. A React 18 öt új horoggal érkezik a fejlesztők tapasztalatának javítása érdekében;

  • useId: Ez a hook lehetővé teszi, hogy egyedi azonosítót (ID) hozzunk létre az alkalmazásunkban mind a szerveren, mind a kliensen.
  • useTransition: Mellett használatos startTransition új állapotfrissítés létrehozásához, amelyet nem sürgősnek nevezhetünk.
  • useDefferedValue: Lehetővé teszi a kevésbé sürgős frissítések elhalasztását.
  • useSyncExternalStore: Ez a hook akkor hasznos, ha külső adatforrásokra való előfizetéseket hajt végre.
  • useInsertionEffect: Ez a hook a CSS-in-JS könyvtár szerzőire korlátozódik a stílusok DOM-ba való beillesztésére.

Hogyan frissítsünk reagálni 18

A frissítés végrehajtásához az npm vagy a yarn csomagkezelő használható a következő parancs futtatásával a terminálon.

npm telepítés react react-dom

vagy

fonal add react react-dom

Ezután módosítania kell a index.js fájlt a projekt mappájának gyökérkönyvtárában a régebbi API-ból az új gyökér API-ba, a korábban bemutatott módon.

Új React 18 projekt létrehozása

Új React 18 projekt beállításához a create-react-app csomag telepítése npm vagy yarn segítségével a terminálon van;

npx teremt-react-app my-react-app

vagy

fonal hozzá teremt-react-app my-react-app

Javítsa alkalmazása teljesítményét a React 18 segítségével

Most már ismeri a React 18 néhány új funkcióját, például az új gyökér API-t, a Suspense-t, az átmenetet vagy az automatikus kötegelést, valamint azt, hogy hogyan frissíthet erre az új verzióra, és hogyan állíthatja be a nulláról.

A React legutóbbi módosításai azonnal megtapasztalhatók.