Overweeg je om te coderen met React? Hier zijn de belangrijkste nieuwe functies om te proberen in React 18.

React is een zeer populaire open-source JavaScript-bibliotheek gemaakt door Facebook in 2013. Vanwege zijn flexibiliteit gebruiken veel ontwikkelaars enkele van zijn functies om snelle, efficiënte en herbruikbare gebruikersinterfacecomponenten (UI) te bouwen.

In maart 2022 lanceerde het team de meest recente en verwachte versie van de React-bibliotheek, React 18, die nieuwe functies bevat die gericht zijn op het verbeteren van de applicatieprestaties.

De nieuwe functies in React 18

React 18 bestaat uit enkele handige nieuwe functies die zijn toegevoegd aan de open-source JavaScript-bibliotheek. Veel van deze wijzigingen waren niet in de vorige versie, terwijl andere functies zijn verbeterd. Enkele van deze functies zijn onder meer; een nieuwe root API, Automatic Batching, Transition API, Suspense API en de release van nieuwe Hooks.

Nieuwe root-API

De root-API in React houdt bij hoe de component op het hoogste niveau wordt weergegeven in de boomstructuur. In de vorige versies van React was de

instagram viewer
veroorzaken methode werd gebruikt om rendering uit te voeren, wat nu de oude root-API wordt genoemd.

React 18 wordt echter geleverd met een nieuwe root-API die een root maakt met behulp van de creëerRoot methode en rendert vervolgens een React-component naar de gemaakte root met behulp van de veroorzaken methode.

Deze nieuwe root-API geeft u toegang tot de functies in deze recente versie, zoals de functie voor de overgangs-API die later wordt besproken. Hoewel de oude manier nog steeds werkt in React 18, kan deze in de toekomst worden uitgefaseerd.

Het onderstaande fragment laat zien hoe de root-API is gestructureerd op zowel de oude als de nieuwe manier.

Legacy Root-API

importeren ReactDOM van'react-dom';
importeren app van'./App';
ReactDOM.render(<app />, document.getElementById('app'))

Nieuwe root-API

importeren ReactDOM van'react-dom/klant';
importeren app van'./App';
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<app />)

Automatisch batchen

Batchen in React omvat meerdere statusupdates in een enkele herweergave bij elke browsergebeurtenis, bijvoorbeeld a klik evenement. Alle statuswijzigingen die buiten een evenement om plaatsvinden, zoals een belofte of callback, worden niet in batches verwerkt.

Met React 18 worden batchstatusupdates automatisch uitgevoerd, ongeacht waar deze updates plaatsvinden. Deze functie biedt out-of-the-box verbetering van de prestaties en weergavetijd. Als u echter een componentstatus hebt waarvan u niet wilt dat deze in een batch wordt geplaatst, kunt u zich afmelden met behulp van de flushSync methode. Hieronder is een voorbeeldfragment van hoe het kan worden gedaan;

importeren {flushSync} van'react-dom';
functiehandvatKlik() {
 flushSync(() => {
 setCount(graaf => tel + 1);
]});
 flushSync(() => {
 setWinkel(winkel => !winkel);
});
}

Overgangs-API

In React kunnen updates in de gebruikersinterface worden gecategoriseerd als urgent en overgangsupdates ook wel niet-urgent genoemd. Een voorbeeld van een urgente update kan het invoeren van een tekst in een veld zijn, terwijl die van een transitie-update een zoekfilterfunctionaliteit kan zijn.

Als dergelijke updates tegelijkertijd plaatsvinden, kan dit een zware operatie worden genoemd en kan dit leiden tot het vastlopen van uw toepassing. Om dit probleem op te lossen, is dit waar de transitie-API de startOvergang komt spelen. Deze nieuwe functie vertelt React welke updates moeten worden gemarkeerd als "overgangen", waardoor gebruikersinteracties worden verbeterd. Hier is een codevoorbeeld van hoe het werkt;

importeren { startOvergang } van"Reageer";
startOvergang(() => {
 setZoeken (invoer);
});

Spanning

Wanneer een applicatie op de server wordt weergegeven, wordt een statisch HTML-bestand teruggestuurd naar de browser, zodat de gebruiker kan zien hoe de app eruitziet terwijl JavaScript wordt geladen. Wanneer het bestand wordt geladen, wordt de HTML dynamisch met wat bekend staat als hydratatie. De tekortkoming hier is dat als al deze niet aanwezig zijn, uw applicatie niet interactief zou worden.

Om dit probleem op te lossen, biedt React 18 twee nieuwe server side rendering (SSR)-functies met behulp van de Spanning bestanddeel;

  • Met streaming HTML kunnen stukjes van een component worden verzonden terwijl ze worden weergegeven.
  • Selectieve hydratatie geeft prioriteit aan de interactiviteit van componenten die door een gebruiker zijn geselecteerd.

Nieuwe haken

Een groot keerpunt voor React was de introductie van haken in Reageren versie 16 waarmee functiecomponenten toegang hebben tot staten en andere React-functies zonder klassen te schrijven. De React 18 wordt geleverd met vijf nieuwe hooks om de ervaring van de ontwikkelaars te verbeteren;

  • useId: Met deze hook kunnen we een unieke identifier (ID) in onze applicatie maken, zowel op de server als op de client.
  • useTransition: Het wordt naast gebruikt startOvergang om een ​​nieuwe statusupdate te maken die niet-urgent kan worden genoemd.
  • useDefferedValue: Hiermee kunnen updates worden uitgesteld die minder urgent zijn.
  • useSyncExternalStore: deze hook is handig bij het implementeren van abonnementen op externe gegevensbronnen.
  • useInsertionEffect: Deze hook is beperkt tot auteurs van CSS-in-JS-bibliotheken voor het injecteren van stijlen in de DOM.

Updaten om te reageren 18

Om een ​​update uit te voeren, kan de npm- of garenpakketbeheerder worden gebruikt door de volgende opdracht in de terminal uit te voeren.

npm installeren reageren reageren-dom

of

garen toevoegen reageren reageren-dom

Dan moet u een wijziging aanbrengen in de index.js bestand in de hoofdmap van de projectmap van de oude API naar de nieuwe root-API zoals eerder getoond.

Hoe een nieuw React 18-project op te zetten

Om een ​​nieuw React 18-project op te zetten, wordt het create-react-app-pakket geïnstalleerd met npm of garen in de terminal;

npx creëren-reageer-app mijn-reageer-app

of

garen toevoegen creëren-reageer-app mijn-reageer-app

Verbeter uw applicatieprestaties met React 18

Nu weet u enkele nieuwe functies in React 18, zoals de nieuwe root-API, Suspense, Transition of Automatic Batching, en hoe u kunt upgraden naar deze nieuwe versie en deze helemaal opnieuw kunt instellen.

Deze recente wijzigingen in React staan ​​voor je klaar om nu te ervaren.