Waarom React 16 geweldig is

27

SEPTEMBER, 2018

React
Components
Documentatie

Net zoals de Apple-fans enthousiast kunnen zijn over een update of een nieuw product, zo enthousiast kunnen developers zijn over een update van frameworks. De nieuwe versies komen met nieuwere features en verbeteringen ten opzichte van de vorige versie. React Developers zullen blij zijn met React 16.

In dit artikel gaan we in op de verbeteringen van React 16 ten opzicht van React15. Over deze punten moet je nadenken om jouw bestaande app te verrijken. Vaarwel React 15!

“React 16 is een zege voor React Developers.”

Fouten afhandelen

React16 introduceert het nieuwe concept van ‘error boundary’. Dat zijn React components die JavaScript fouten opvangen in de child boomstructuur. Deze errors worden gelogd en in een UI display getoond, in plaas van in de gecrashte boomstructuur. Error boundaries vangen de fouten tijdens het renderen af. Een component wordt een error boundary als het een nieuwe cyclus kan aan maken, namelijk ‘componentDedCatch(error, info):

De ‘componentDidCatch()’ werkt net zoals JavaScript ‘catch {}’, maar dan voor components. Alleen class components kunnen error boundaries zijn. In de praktijk zul je waarschijnlijk een error boundary per component willen aanmaken. Dan kun je het door de hele applicatie gebruiken.

Error boundaries kunnen alleen fouten vangen van de components onder hen in de structuur. Een error boundary kan geen error in zichzelf vinden. Als er een fout in de boundary er in faalt om een foutmelding te renderen, zal de dichtsbijzijnde error boundary daarboven de fout doorgeven. Dit is ook vergelijkbaar met de werkwijze van ‘catch {}’ in JavaScript.

Voor meer informatie over foutafhandeling in React16, kun je naar deze pagina gaan.

Een nieuwe renderretourtypen: fragmenten en tekenreeksen

Je hoeft componenten niet meer in een div zetten tijdens het renderen.

Je kunt nu een array met elementen uit de weergave van een component retourneren. Net zoals bij andere arrays, zul je een key moeten toevoegen voor elk element om een key waarschuwing te voorkomen:

React 16.2.0 heeft zelfs de ondersteuning om speciale syntax fragmenten die geen keys nodig hebben.

Portals

Portals zorgen voor de beste manier om te renderen naar een DOM node dat bestaat buiten de DOM hiërarchie van de parent component.

ReactDOM.createPortal(child, container)

Het eerste onderdeel (child) is een React child dat gerenderd kan worden, zoals een element, string of fragment. Het tweede onderdeel (container) is een DOM element.

Hoe te gebruiken

Als je een element uit de weergavemethode van een component retourneert, wordt het als een onderliggend component van de dichtsbijzijnde parent in de DOM geladen:

Soms is het zinvol om een child in een andere locatie in te voeren dan de DOM:

Een veelvoorkomende situatie voor portals is wanneer een parent component een ‘overflow: hidden’ of ‘z-index’ stijl heeft, maar je hebt wel de child visueel nodig om uit zijn container te ‘breken’. Bijvoorbeeld bij dialogen, tooltips en hovercards.

Custom DOM attribuut

React15 negeerde elke onbekende DOM attribuut. De attributen die het niet herkende zou hij overslaan. Daardoor zou hij bij de output een lege div uitvoeren. In React16 zou de custom attribuut niet genegeerd worden.

Voorkom re-render met NULL

Met React16 kun je updates van status en re-renders direct voorkomen door ‘setState()’. Daarvoor moet jouw function enkel ‘null’ uit te voeren.

Voor meer informatie over onnodige re-renders, Lees dit bericht.

Refs maken

Referenties maken is veel gemakkelijker met React16. Waar je refs voor nodig hebt:

  • Beheer van focus, tekst selectie of het terugspelen van media
  • activeren van noodzakelijke animaties.
  • Integratie met libraries van derden.

Refs zijn gemaakt met ‘React.creatRef()’ en zijn gekoppeld aan de React elements via de ‘ref’ attribuut. Refs zijn over het algemeen toegewezen aan een eigenschap als er binnen een component naar kan worden verwezen.

Toegankelijkheid

Als een ref is wordt doorgegeven aan een element in ‘render’, wordt een verwijzing naar de node op het huidige attribuut van de ref toegankelijk. De waarde van de ref is afhankelijk van het type node:

  • Als het kenmerk ref wordt gebruikt voor een HTML-element, ontvangt de ref die is gemaakt in de constructor met ‘React.createRef()’ het onderliggende DOM-element als zijn huidige eigenschap.
  • Als het kenmerk ref wordt gebruikt op een component van de aangepaste class, ontvangt het object de opgeplakte status van de component als zijn huidige status.
  • Je mag het kenmerk ref niet gebruiken voor functionele componenten omdat deze geen instanties hebben.

Context API

Context zorgt voor een manier om data door de structuur te sturen zonder dat props handmatig de gegevens door moeten geven op elk niveau.

React.createContext

Dit creëert een paar {Provider, Consumer}. Wanneer React een context ‘Consumer’ weergeeft, wordt de huidige contextwaarde gelezen van de dichtstbijzijnde overeenkomende ‘Provider’ erboven in de structuur.

Het ‘defaultValue’ argument wordt alleen gebruikt door een consument als er geen overeenkomende provider boven in de structuur staat. Dit kan handig zijn om componenten afzonderlijk te testen zonder ze te verpakken in divs. Echter, als je ‘undefined’ doorgeeft als een Provider-waarde, leidt dit niet tot een gebruik door ‘defaultValue’.

Provider

Een React component dat het voor Consumers mogelijk maakt om zich in te schrijven voor context veranderingen.

Accepteert een ‘value’ prop die moet worden doorgegeven aan Consumers die afstammelingen zijn van deze Provider. Één provider kan worden verbonden met meerdere consumers. Providers kunnen worden genest om waarden dieper in de structuur te overschrijven.

Consumer

Een React component dat zich inschrijft voor context veranderingen.

Heeft een function als child nodig. De functie ontvangt de huidige contextwaarde en voert een React node uit. De ‘value’ dat aan de functie wordt toegekend, is gelijk aan de ‘value’ van de dichtsbijzijnde provider. Als er geen provider voor deze bovenstaande context is, is de ‘value’ gelijk aan de ‘defaultValue’ die is doorgegeven aan ‘createContext()’

Statische getDerivedStateFromProps()

‘getDerivedStateFromProps’ wordt aangeroepen net, voordat de rendermethode wordt aangeroepen. Zowel bij de initiële mount als bij latere updates. Het moet een object uitvoeren om de staat bij te werken, of NULL om niets bij te werken.

Deze methode bestaat voor zeldzame gevallen waarbij de toestand afhangt van veranderingen in rekwisieten in de loop van de tijd. Het kan bijvoorbeeld handig zijn om te implementeren en zijn vorige en volgende childs vergelijkt om te bepalen welke van hen in en uit moet gaan.

Zorg ervoor dat je bekend bent met eenvoudigere alternatieven:

  • ALs je een bijwerking (bijvoorbeeld het ophalen van gegevens of een animatie) wilt uitvoeren als reactie op een wijziging in rekwisieten, gebruik je in plaats daarvan de levenscyclus van ‘componentDitUpdate’.
  • Als je sommige gegevens alleen opnieuwe wilt berekenen wanneer een prop verandert, gebruik dan een ‘memoization helper’.
  • Als je gegevens wil resetten als een prop verandert, overweeg dan om een component volledig gecontroleerd of volledig ongecontoleerd met een ‘key’ te maken.

Deze methode heeft geen toegang tot de componenten. Als je wilt, kun je een code hergebruiken tussen ‘getDerivedStateFromProps ()’ en de andere class methodes door functions uit de component props buiten de class definitie te trekken.

Let wel dat deze methode wordt geactiveerd op elke render, ongeacht de oorzaak. Dit staat in contrast met ‘UNSAFE_componentWillReceiveProps’. Het activeert alleen wanneer de parent een re-render veroorzaakt en niet als een resultaat van een lokale ‘setState’.

We vergelijken ‘nextProps.someValue’ met ‘this.props.someValue’. Als beide verschillend zijn, voeren we een bewerking uit: ‘setState’.

Bovenstaande code ontvangt twee parameters ‘nextProps’ en ‘prevState’. Zoals eerder benoemd, kun je hier geen toegang tot krijgen binnen deze methode. Je zult de props in de staat moeten opslaan om de ‘nextProps’ te vergeleijken met eerdere props. Hier worden ‘nextProps’ en ‘prevState’ met elkaar vergeleken. Als beide verschillend zijn, wordt een object geretourneerd om de status bij te werken. Anders wordt ‘null’ geretourneerd om aan te geven dat de statusupdate niet vereist is. Als de status verandert, wordt ‘componentDidUpdate’ aangeroepen waar we de gewenste bewerkingen kunnen uitvoeren, zoals we dat eerder deden in ‘componentWillReceiveProps’.

React Lifecycle

Als laatste zijn er ook enkele wijzigingen in de component levencyclus. Met de ondersteuning van ‘error boundaries’ en ‘async rendering’ heeft de cyclus enkele aanpassingen ondergaan, waar het eerder niet voor gemaakt was:

React component lifecycle

Dit zijn de belangrijkste veranderingen in React16. Als je met React werkt of React wilt leren, zou je deze functies zeker uit moeten proberen! Heb je vragen of mis je informatie, laat het ons weten.

Bij System4 hebben we enkele React-experts die professionele ervaring hebben met het werken in een React-project. Zij kunnen je helpen met jouw React-project.

JavaScript code
Developer aan laptop