Når bør De bruke imperative kontra deklarative API-er

React fremmer en deklarativ stil: Man beskriver hvordan brukergrensesnittet skal se ut for en gitt state, og React avstemmer DOM-en slik at den samsvarer. Det meste av oppførselen går gjennom props og state i stedet for direkte DOM-kommandoer.

Denne modellen gjør brukergrensesnitt forutsigbare, siden det gjengitte resultatet er en ren funksjon av state, ikke resultatet av en rekke manuelle mutasjoner.

Noen interaksjoner lar seg vanskelig uttrykke rent deklarativt. Å sette fokus på et element imperativt, utløse en animasjon på et nøyaktig tidspunkt eller styre en tredjeparts DOM-widget kan ofte ikke uttrykkes ryddig som en funksjon av state.

For disse tilfellene tilbyr React escape hatches som refs og imperative handles, brukt med måte der deklarative props ikke strekker til.

Imperative API-er har avveininger. De er vanskeligere å teste, siden metodene må kjøres og bieffektene observeres, og de kan bryte den enveis dataflyten som gjør React-applikasjoner enkle å følge.

Imperative kall har også en tendens til å spre oppførselen over flere hendelsesbehandlere i stedet for å samle den i en tydelig kobling fra state til brukergrensesnitt, noe som øker vedlikeholdskostnadene.

Foretrekk deklarative API-er, og bruk imperative API-er bare til interaksjoner og målinger: fokus, scrolling, animasjoner, medieavspilling og lesing av størrelser eller posisjoner.

Hvis noe kan modelleres som state som avbildes til gjengitt innhold, bør det gjøres slik. Hvis det er en kortvarig handling uten en ryddig representasjon som state, passer et imperativt handle.

En deklarativ modal rendres basert på en isOpen-prop som den overordnede komponenten eier, slik at synligheten styres av state. En imperativ modal eksponerer metodene open og close, og skjuler sin egen state bak et handle.

Den deklarative varianten passer bedre med Reacts dataflyt og foretrekkes vanligvis, mens den imperative kan være praktisk når utløsingen må skje fra spredt, hendelsesstyrt kode.

Et skjema kan nullstilles deklarativt ved å endre key-propen, noe som tvinger React til å montere det på nytt med standard-state. Det kreves ikke noe imperativt kall.

Det imperative alternativet eksponerer en reset-metode på et handle. key-trikset er ofte ryddigere fordi det bygger på Reacts avstemming i stedet for manuell tømming av state.

Next.js-ruteren eksponerer imperative metoder som push, replace og prefetch. Å forhåndslaste en rute før en sannsynlig navigering er en handling, ikke en del av render-state, så et imperativt kall passer naturlig.

Dette viser at selv idiomatisk React-verktøy bruker imperative API-er når operasjonen i bunn og grunn er en handling som utløses på et bestemt tidspunkt.

Den offisielle veiledningen omtaler refs og imperative handles som escape hatches – verktøy for å gå utenfor den deklarative modellen når det virkelig er nødvendig. De er ikke standardmåten å bygge funksjonalitet på.

Dette perspektivet motvirker overbruk: En escape hatch tas først i bruk etter at det er bekreftet at props og state ikke kan uttrykke oppførselen på en ryddig måte.

Før et imperativt handle legges til, bør følgende spørsmål stilles: Kan dette være state som avbildes til brukergrensesnittet? I så fall bør det forbli deklarativt. Gjelder det fokus, scrolling, måling, animasjon eller en tredjepartshandling? I så fall kan en imperativ løsning være berettiget.

Bekreft også at API-flaten er liten og dokumentert, og at en ref ikke brukes bare for å sende data som en prop kunne ha båret.

Virkelige applikasjoner kombinerer begge tilnærmingene. Det aller meste av logikken forblir deklarativt, med et tynt lag av imperative handles for de få interaksjonene som trenger dem.

En slik balanse holder koden forutsigbar og testbar, samtidig som den gjør det mulig å håndtere fokusstyring, mediekontroll og bibliotekintegrasjon der deklarativ kode ikke strekker til.

React bruker som standard et deklarativt brukergrensesnitt drevet av props og state, noe som gjør det forutsigbart og testbart. Imperative handles fungerer som escape hatches for fokus, scrolling, animasjon, måling og styring av tredjeparts-DOM.

Sammenlign deklarative og imperative modaler, foretrekk key-prop ved nullstilling av skjemaer, og husk at selv Next.js-ruteren bruker imperative metoder for handlinger. Hold det imperative laget lite, dokumentert og begrunnet.