De langverwachte React v18 is een paar maanden geleden eindelijk uitgebracht. Hoewel er geen grote veranderingen waren, zijn er enkele interessante functies toegevoegd die het bekijken waard zijn. In dit artikel worden enkele nieuwe toevoegingen besproken en hoe u kunt upgraden naar React v18.

Hoe te upgraden om te reageren 18

Om de nieuwste versie van React te installeren, voert u deze opdracht uit in een terminal:

npm installeren reageren reageren-dom

Of als je garen gebruikt:

garen toevoegen reageren reageren-dom

Zodra u de nieuwste versie hebt geïnstalleerd, kunt u profiteren van de nieuwe functies.

Er zijn verschillende toevoegingen in React 18; hier zijn vier van de meest opvallende.

1. Strikte modus

StrictMode is een functie die u kunt gebruiken om potentiële problemen in een toepassing te markeren. Strikte moduscontroles worden alleen in de ontwikkelingsmodus uitgevoerd en hebben geen invloed op de productie-build. Ze kunnen echter erg handig zijn bij het identificeren van mogelijke problemen in uw code.

instagram viewer

U kunt de strikte modus inschakelen voor elk onderdeel van uw toepassing. U kunt het bijvoorbeeld voor al uw componenten inschakelen, of slechts voor enkele ervan.

importeren Reageer van 'Reageer';
functieDemoVoorbeeld() {
opbrengst (
<div>
<Eerste Component />
<Reageer. Strikte modus>
<Tweede Component />
<Derde Component />
</React.StrictMode>
<Vierde Component />
</div>
 );
}

In de bovenstaande code worden alle vier de componenten gecontroleerd op mogelijke problemen. Strenge moduscontroles zijn echter alleen van toepassing op de en .

StrictMode helpt ook op andere manieren, zoals:

  • Onderdelen met onveilige levenscycli identificeren: Als een component een levenscyclusmethode heeft die als onveilig is gemarkeerd, zal de strikte modus u hiervoor waarschuwen.
  • Waarschuwing over legacy string ref API-gebruik: Als u de legacy string ref API gebruikt, zal de strikte modus u waarschuwen voor het gebruik ervan.
  • Waarschuwing over verouderd gebruik van findDOMNode: Als u de verouderde findDOMNode API gebruikt, zal de strikte modus u hierover waarschuwen.
  • Onverwachte bijwerkingen detecteren: Als een component op onverwachte plaatsen bijwerkingen veroorzaakt (zoals setState), zal de strikte modus u hiervoor waarschuwen.
  • Lege context-API detecteren: Als u de verouderde context-API gebruikt (die nu is verouderd), waarschuwt de strikte modus u hierover.
  • Zorgen voor een herbruikbare staat: Als u een status heeft die door meerdere componenten wordt gebruikt, zorgt de strikte modus ervoor dat deze correct wordt gesynchroniseerd.

Over het algemeen kan de strikte modus een handige functie zijn tijdens de ontwikkeling om potentiële problemen in uw code te identificeren.

2. Overgangen

Met overgangen kunt u bepaalde UI-updates markeren als niet-dringend. Dit betekent dat React prioriteit kan geven aan andere updates die belangrijker zijn.

Als u bijvoorbeeld twee tekstvelden heeft, één voor een zoekopdracht en één voor de resultaten, wilt u het tekstveld met zoekresultaten markeren als een overgang. Op die manier weet React dat het niet dringend dat tekstveld opnieuw hoeft te renderen telkens wanneer de gebruiker iets typt in het tekstveld van de zoekopdracht.

U kunt de functie startTransition gebruiken om een ​​UI-update als een overgang te markeren. Hier is een voorbeeld:

importeren { startOvergang } van 'Reageer';
startOvergang(() => {
// Markeer alle niet-urgente statusupdates binnen als overgangen
});

Deze code markeert alle statusupdates binnen de startTransition-functie als overgangen. Op die manier kan React zich concentreren op andere, meer belangrijke UI-updates.

3. Automatische batchverwerking

React biedt een handige functie, batching genaamd, die het aantal re-renders vermindert dat plaatsvindt wanneer een status verandert. Dit kan erg nuttig zijn bij het optimaliseren van de prestaties, vooral wanneer: werken met asynchrone code.

Als u voorheen een belofte had gedaan of een netwerkoproep deed, werden de statusupdates niet gegroepeerd en moest React meerdere keren opnieuw worden weergegeven. Met automatische batchverwerking in React 18 worden alle statusupdates echter gegroepeerd, zelfs binnen beloften, setTimeouts en callbacks van gebeurtenissen. Dit vermindert het werk dat React op de achtergrond moet doen aanzienlijk.

U kunt batchstatusupdates handmatig uitvoeren met behulp van de flushSync-functie, maar vanaf React 18 is dit proces nu automatisch. Dit resulteert in veel betere prestaties, omdat React wacht tot een microtaak is voltooid voordat het opnieuw wordt weergegeven.

4. Nieuwe haken

Versie 18 introduceert veel nieuwe Reageerhaken, inclusief useId, useTransition en useDeferredValue. Deze nieuwe Hooks bieden een geweldige manier om met minimale inspanning extra functionaliteit aan je React-apps toe te voegen.

React 18 levert verbeterde app-prestaties

React 18 is hier, en het brengt een aantal geweldige verbeteringen met zich mee voor de prestaties van web-apps. Met de nieuwe versie van React kun je eenvoudig web-apps maken die responsiever zijn en over het algemeen beter presteren. Dus als je een web-app wilt maken die soepel werkt en er geweldig uitziet, kijk dan eens naar React 18.