Wanneer gebruikt u imperative versus declarative API's

React stimuleert een declaratieve stijl: je beschrijft hoe de gebruikersinterface er voor een bepaalde status uit moet zien en React brengt de DOM daarmee in overeenstemming. Het meeste gedrag loopt via eigenschappen en status in plaats van via directe DOM-opdrachten.

Dit model maakt gebruikersinterfaces voorspelbaar, omdat de weergegeven uitvoer een pure functie van de status is en niet het resultaat van een reeks handmatige mutaties.

Sommige interacties laten zich niet puur declaratief uitdrukken. Een element imperatief focus geven, op een precies moment een animatie starten of een DOM-widget van derden aansturen kan vaak niet netjes worden beschreven als functie van de status.

Voor deze gevallen biedt React uitwijkmogelijkheden zoals refs en imperatieve handles. Gebruik die terughoudend, op plekken waar declaratieve eigenschappen tekortschieten.

Imperatieve API's brengen nadelen met zich mee. Ze zijn lastiger te testen, omdat je methoden moet aanroepen en bijwerkingen moet observeren. Ook kunnen ze de eenrichtingsgegevensstroom doorbreken die React-apps overzichtelijk maakt.

Imperatieve aanroepen verspreiden gedrag bovendien vaak over gebeurtenisafhandelaars in plaats van het te concentreren in een duidelijke koppeling van status aan gebruikersinterface, waardoor het onderhoud duurder wordt.

Geef de voorkeur aan declaratieve API's en kies alleen imperatieve API's voor interacties en metingen: focus, scrollen, animaties, media afspelen en het lezen van afmetingen of posities.

Als iets kan worden gemodelleerd als status die naar weergegeven uitvoer wordt vertaald, doe dat dan. Als het om een kortstondige actie gaat zonder duidelijke statusweergave, is een imperatieve handle geschikt.

Een declaratief modaal venster wordt weergegeven op basis van een isOpen-eigenschap die de bovenliggende component beheert, zodat de zichtbaarheid door status wordt bepaald. Een imperatief modaal venster stelt de methoden open en close beschikbaar en verbergt zijn eigen status achter een handle.

De declaratieve versie past beter bij de gegevensstroom van React en heeft meestal de voorkeur. De imperatieve versie kan handig zijn wanneer de activering afkomstig moet zijn uit verspreide, gebeurtenisgestuurde code.

Je kunt een formulier declaratief resetten door de key-eigenschap te wijzigen, waardoor React het opnieuw opbouwt met de standaardstatus. Daarvoor is geen imperatieve aanroep nodig.

Het imperatieve alternatief stelt een reset-methode beschikbaar op een handle. De truc met key is vaak netter, omdat die gebruikmaakt van Reacts afstemming in plaats van de status handmatig te wissen.

De Next.js-router stelt imperatieve methoden zoals push, replace en prefetch beschikbaar. Een route vooraf laden voordat een waarschijnlijke navigatie plaatsvindt, is een actie en geen onderdeel van de renderstatus, dus een imperatieve aanroep past hier natuurlijk.

Dit laat zien dat zelfs idiomatische React-hulpmiddelen imperatieve API's gebruiken wanneer de bewerking in wezen een actie is die op een bepaald moment wordt geactiveerd.

De officiële richtlijnen beschrijven refs en imperatieve handles als uitwijkmogelijkheden: hulpmiddelen om buiten het declaratieve model te stappen wanneer dat echt nodig is. Ze zijn niet de standaardmanier om functies te bouwen.

Deze denkwijze voorkomt overmatig gebruik: kies pas een uitwijkmogelijkheid nadat je hebt vastgesteld dat eigenschappen en status het gedrag niet netjes kunnen uitdrukken.

Vraag jezelf voordat je een imperatieve handle toevoegt af: kan ik dit modelleren als status die aan de gebruikersinterface wordt gekoppeld? Zo ja, blijf dan declaratief. Gaat het om focus, scrollen, een meting, een animatie of een actie van een externe bibliotheek? Zo ja, dan kan imperatieve code gerechtvaardigd zijn.

Controleer ook of de interface klein en gedocumenteerd is en of je geen ref gebruikt om simpelweg gegevens door te geven die ook in een eigenschap zouden passen.

Echte toepassingen combineren beide benaderingen. Het overgrote deel van de logica blijft declaratief, met een dunne laag imperatieve handles voor de enkele interacties die deze nodig hebben.

Door deze balans te bewaren, blijft je code voorspelbaar en testbaar, terwijl je toch focusbeheer, mediabesturing en integratie met bibliotheken kunt afhandelen waar declaratieve code niet kan komen.

React gebruikt standaard een declaratieve gebruikersinterface die door eigenschappen en status wordt aangestuurd en daardoor voorspelbaar en testbaar is. Imperatieve handles zijn uitwijkmogelijkheden voor focus, scrollen, animaties, metingen en besturing van DOM-elementen van derden.

Vergelijk declaratieve en imperatieve modale vensters, geef bij het resetten van formulieren de voorkeur aan de key-eigenschap en onthoud dat zelfs de Next.js-router imperatieve methoden gebruikt voor acties. Houd de imperatieve laag klein, gedocumenteerd en gerechtvaardigd.