Den efterlängtade React v18 släpptes äntligen för några månader sedan. Även om det inte gjordes några större förändringar, lades det till några intressanta funktioner som är värda att ta en titt på. Den här artikeln kommer att gå över några nya tillägg och hur man uppgraderar till React v18.

Hur man uppgraderar till React 18

För att installera den senaste versionen av React kör detta kommando i en terminal:

npm Installera reagera reagera-dom

Eller om du använder garn:

garn tillsätt reagera reagera-dom

När du har installerat den senaste versionen kan du börja dra nytta av dess nya funktioner.

Det finns flera tillägg i React 18; här är fyra av de mest anmärkningsvärda.

1. Strikt läge

StrictMode är en funktion som du kan använda för att lyfta fram potentiella problem i en applikation. Strikta lägeskontroller körs endast i utvecklingsläge och påverkar inte produktionsbygget. De kan dock vara mycket användbara för att identifiera potentiella problem i din kod.

Du kan aktivera strikt läge för vilken del av din applikation som helst. Du kan till exempel aktivera det för alla dina komponenter, eller bara för några av dem.

instagram viewer 

importera Reagera från 'reagera';
fungeraDemoExempel() {
lämna tillbaka (
<div>
<FirstComponent />
<Reagera. StrictMode>
<SecondComponent />
<ThirdComponent />
</React.StrictMode>
<Fjärde Komponent />
</div>
 );
}

I ovanstående kod skulle alla fyra komponenterna kontrolleras för potentiella problem. Men strikta lägeskontroller gäller endast för och .

StrictMode hjälper också på andra sätt, som:

  • Identifiera komponenter med osäkra livscykler: Om en komponent har en livscykelmetod som är markerad som osäker, kommer strikt läge att varna dig om det.
  • Varning om äldre strängreferens API-användning: Om du använder den äldre strängref API, kommer det strikta läget att varna dig om dess användning.
  • Varning om föråldrad findDOMNode-användning: Om du använder det föråldrade findDOMNode API, kommer det strikta läget att varna dig om det.
  • Upptäcka oväntade biverkningar: Om en komponent utlöser biverkningar (som setState) på oväntade ställen, kommer det strikta läget att varna dig om det.
  • Upptäcker äldre kontext-API: Om du använder det äldre kontext-APIet (som nu är utfasat), kommer det strikta läget att varna dig om det.
  • Säkerställ återanvändbart tillstånd: Om du har ett tillstånd som används av flera komponenter, kommer strikt läge att hjälpa till att säkerställa att det är korrekt synkroniserat.

Sammantaget kan strikt läge vara en användbar funktion i utvecklingen för att hjälpa till att identifiera potentiella problem i din kod.

2. Övergångar

Med övergångar kan du markera vissa UI-uppdateringar som icke-brådskande. Det betyder att React kan prioritera andra uppdateringar som är viktigare.

Om du till exempel har två textfält – ett för en sökfråga och ett för dess resultat – vill du markera sökresultatens textfält som en övergång. På så sätt vet React att den inte behöver rendera om textfältet brådskande varje gång användaren skriver något i sökfrågans textfält.

Du kan använda startTransition-funktionen för att markera en UI-uppdatering som en övergång. Här är ett exempel:

importera { startTransition } från 'reagera';
startTransition(() => {
// Markera alla icke-brådskande tillståndsuppdateringar inuti som övergångar
});

Denna kod skulle markera alla tillståndsuppdateringar i startTransition-funktionen som övergångar. På så sätt kan React fokusera på andra viktigare UI-uppdateringar.

3. Automatisk dosering

React tillhandahåller en användbar funktion som kallas batchning som minskar antalet återrenderingar som sker när ett tillstånd ändras. Detta kan vara till stor hjälp för att optimera prestanda, särskilt när arbetar med asynkron kod.

Tidigare, om du hade ett löfte eller ringde ett nätverkssamtal, skulle tillståndsuppdateringarna inte batchas, och React skulle behöva återrendera flera gånger. Men med automatisk batchning i React 18 batchas alla tillståndsuppdateringar, även inom löften, setTimeouts och händelseåteruppringningar. Detta minskar avsevärt arbetet som React måste göra i bakgrunden.

Du kan batchstatusuppdateringar manuellt genom att använda flushSync-funktionen, men från och med React 18 är denna process nu automatisk. Detta resulterar i mycket bättre prestanda, eftersom React väntar på att en mikrouppgift ska slutföras innan den återrenderas.

4. Nya krokar

Version 18 introducerar många nya Reagera krokar, inklusive useId, useTransition och useDeferredValue. Dessa nya krokar ger ett utmärkt sätt att lägga till extra funktionalitet till dina React-appar med minimal ansträngning.

React 18 ger ökad appprestanda

React 18 är här, och det för med sig några stora förbättringar av webbapps prestanda. Med den nya versionen av React kan du enkelt skapa webbappar som är mer responsiva och presterar bättre överlag. Så om du funderar på att skapa en webbapp som fungerar smidigt och ser bra ut, se till att kolla in React 18.