Funderar du på att testa kodning med React? Här är de viktigaste nya funktionerna att prova i React 18.

React är ett mycket populärt JavaScript-bibliotek med öppen källkod skapat av Facebook 2013. På grund av dess flexibilitet utnyttjar många utvecklare några av dess funktioner för att bygga snabba, effektiva och återanvändbara komponenter för användargränssnitt (UI).

I mars 2022 lanserade teamet den senaste och förväntade versionen av React-biblioteket, React 18, som innehåller nya funktioner som fokuserar på att förbättra applikationens prestanda.

De nya funktionerna i React 18

React 18 består av några användbara nya funktioner som lagts till JavaScript-bibliotek med öppen källkod. Många av dessa ändringar fanns inte i den tidigare versionen medan andra funktioner förbättrades. Några av dessa funktioner inkluderar; ett nytt root-API, Automatic Batching, Transition API, Suspense API och lanseringen av nya Hooks.

Nytt Root API

Rot-API: et i React håller reda på hur toppnivåkomponenten renderas i trädet. I de tidigare versionerna av React,

instagram viewer
framställa metod användes för att köra rendering som nu kallas det äldre root API.

React 18 kommer dock med ett nytt root API som skapar en root med hjälp av skapaRoot metod och renderar sedan en React-komponent till den skapade roten med hjälp av framställa metod.

Detta nya root-API ger dig tillgång till funktionerna i den senaste versionen, till exempel övergångs-API-funktionen som diskuteras senare. Även om det gamla sättet fortfarande kommer att fungera i React 18, kan det fasas ut i framtiden.

Utdraget nedan visar hur root-API: t är strukturerat på både det gamla och nya sättet.

Legacy Root API

importera ReactDOM från"reaktionsdom";
importera App från'./App';
ReactDOM.render(<App />, dokumentera.getElementById('app'))

Nytt Root API

importera ReactDOM från"reagera-dom/klient";
importera App från'./App';
konst root = ReactDOM.createRoot(dokumentera.getElementById('app'));
root.render(<App />)

Automatisk dosering

Batchning i React involverar flera tillståndsuppdateringar i en enda omrendering på varje webbläsarhändelse, till exempel en klicka på händelse. Eventuella tillståndsändringar som inträffade utanför en händelse som ett löfte eller återuppringning kommer inte att batchas.

Med React 18 görs batchstatusuppdateringar automatiskt oavsett var dessa uppdateringar sker. Den här funktionen ger direkt förbättring av prestanda och renderingstid. Men om du har ett komponenttillstånd som du inte vill ska batcha, kan du välja bort det med hjälp av flushSync metod. Nedan är ett exempel på hur det kan göras;

importera { flushSync } från"reaktionsdom";
fungerahandleClick() {
 flushSync(() => {
 setCount(räkna => räkna + 1);
]});
 flushSync(() => {
 setStore(Lagra => !Lagra);
});
}

Övergångs-API

I React kan uppdateringar gjorda i användargränssnittet kategoriseras som brådskande och övergångsuppdateringar kallas även icke-brådskande. Ett exempel på en brådskande uppdatering kan vara att skriva in en text i ett fält medan en övergångsuppdatering kan vara en sökfiltreringsfunktion.

Nu, om sådana uppdateringar sker samtidigt, kan detta kallas en tung operation och kan leda till att din applikation fryser. För att lösa detta problem är det här som övergångs-APIet kallade startaTransition kommer för att spela. Den här nya funktionen talar om för React vilka uppdateringar som ska markeras som "övergångar", vilket i sin tur förbättrar användarinteraktioner. Här är ett kodexempel på hur det fungerar;

importera { startTransition } från"reagera";
startTransition(() => {
 setSearch (ingång);
});

Spänning

När en applikation renderas på servern returneras en statisk HTML-fil till webbläsaren så att användaren kan se hur appen ser ut medan JavaScript laddas. När filen laddas blir HTML-koden dynamisk med vad som kallas hydrering. Bristen här är att om alla dessa inte är på plats, skulle din ansökan inte bli interaktiv.

För att lösa detta problem tillhandahåller React 18 två nya funktioner för rendering på serversidan (SSR) med hjälp av Spänning komponent;

  • Strömmande HTML gör att delar av en komponent kan skickas när de renderas.
  • Selektiv hydrering prioriterar interaktiviteten hos komponenter som valts av en användare.

Nya krokar

En stor vändpunkt för React var introduktionen av hakar i React version 16 som tillåter funktionskomponenter att komma åt tillstånd och andra React-funktioner utan att skriva klasser. React 18 levereras med fem nya krokar för att förbättra utvecklarnas upplevelse;

  • useId: Denna krok låter oss skapa en unik identifierare (ID) i vår applikation både på servern och klienten.
  • useTransition: Den används vid sidan av startaTransition för att skapa en ny tillståndsuppdatering som kan betecknas som icke-brådskande.
  • useDefferedValue: Det tillåter skjuta upp uppdateringar som är mindre brådskande.
  • useSyncExternalStore: Denna hook är användbar när du implementerar prenumerationer på externa datakällor.
  • useInsertionEffect: Denna hook är begränsad till CSS-in-JS-biblioteksförfattare för att injicera stilar i DOM.

Hur man uppdaterar till React 18

För att utföra en uppdatering kan npm eller garnpakethanteraren användas genom att köra följande kommando i terminalen.

npm Installera reagera reagera-dom

eller

garn tillsätt reagera reagera-dom

Sedan måste du göra en ändring av index.js fil i rotkatalogen för projektets mapp från det äldre API: et till det nya rot-API: et som visats tidigare.

Hur man skapar ett nytt React 18-projekt

För att sätta upp ett nytt React 18-projekt installeras paketet create-react-app med npm eller garn i terminalen;

npx skapa-react-app min-react-app

eller

garn lägga till skapa-react-app min-react-app

Förbättra din applikationsprestanda med React 18

Nu vet du om några nya funktioner i React 18 som det nya root-API: et, Suspense, Transition eller Automatic Batching, och hur du uppgraderar till denna nya version och ställer in den från början.

Dessa senaste ändringar av React är redo för dig att uppleva just nu.