Milloin imperatiivisia ja deklaratiivisia API-rajapintoja käytetään

React kannustaa deklaratiiviseen tyyliin: kuvaatte, miltä käyttöliittymän pitäisi näyttää tietyssä tilassa, ja React sovittaa DOM:n vastaamaan kuvausta. Useimmat toiminnot kulkevat propsien ja tilan kautta eivätkä suorina DOM-komentoina.

Tämä malli tekee käyttöliittymistä ennakoitavia, koska renderöity tulos on tilan puhdas funktio eikä manuaalisten muutosten sarjan tulos.

Jotkin vuorovaikutukset eivät taivu puhtaasti deklaratiiviseen esitykseen. Elementin imperatiivinen kohdistaminen, animaation käynnistäminen täsmällisellä hetkellä tai kolmannen osapuolen DOM-widgetin ohjaaminen ei usein onnistu siististi pelkän tilan funktiona.

Näitä tilanteita varten React tarjoaa escape hatch -mekanismeja, kuten refit ja imperatiiviset handlet, joita käytetään harkiten silloin, kun deklaratiiviset propsit eivät riitä.

Imperatiivisilla API:lla on haittapuolensa. Niitä on vaikeampi testata, koska metodeja on kutsuttava ja sivuvaikutuksia tarkkailtava, ja ne voivat rikkoa yksisuuntaisen tietovirran, joka tekee React-sovelluksista helposti seurattavia.

Imperatiiviset kutsut myös hajauttavat toiminnan tapahtumankäsittelijöihin sen sijaan, että se keskittyisi selkeään tila–käyttöliittymä-kuvaukseen, mikä lisää ylläpidon kustannuksia.

Suosikaa deklaratiivisia API:ja ja turvautukaa imperatiivisiin vain vuorovaikutuksiin ja mittauksiin, kuten kohdistamiseen, vieritykseen, animaatioihin, median toistoon sekä koon tai sijainnin lukemiseen.

Jos jokin voidaan mallintaa tilaksi, joka yhdistyy renderöityyn tulokseen, toimikaa niin. Jos kyseessä on hetkellinen toiminto, jolle ei ole selkeää tilaesitystä, imperatiivinen handle on sopiva ratkaisu.

Deklaratiivinen modaali renderöityy vanhemman komponentin omistaman isOpen-propin perusteella, joten näkyvyyttä ohjataan tilalla. Imperatiivinen modaali tarjoaa open- ja close-metodit ja piilottaa oman tilansa handlen taakse.

Deklaratiivinen versio sopii paremmin Reactin tietovirtaan ja on yleensä suositeltava, kun taas imperatiivinen versio voi olla kätevä, jos käynnistys on tehtävä hajallaan olevasta tapahtumapohjaisesta koodista.

Voitte nollata lomakkeen deklaratiivisesti muuttamalla sen propin key arvoa, mikä pakottaa Reactin liittämään komponentin uudelleen oletustilassa. Imperatiivista kutsua ei tarvita.

Imperatiivinen vaihtoehto tarjoaa reset-metodin handlen kautta. key-temppu on usein selkeämpi, koska se hyödyntää Reactin sovitusta manuaalisen tilan tyhjentämisen sijaan.

Next.js-reititin tarjoaa imperatiivisia metodeja, kuten push, replace ja prefetch. Reitin esilataaminen ennen todennäköistä navigointia on toiminto, ei osa renderöintitilaa, joten imperatiivinen kutsu sopii siihen luontevasti.

Tämä osoittaa, että jopa idiomaattiset React-työkalut käyttävät imperatiivisia API:ja, kun kyse on pohjimmiltaan tiettynä hetkenä käynnistettävästä toiminnosta.

Virallisissa ohjeissa refit ja imperatiiviset handlet kuvataan escape hatch -mekanismeiksi: niiden avulla deklaratiivisen mallin ulkopuolelle astutaan silloin, kun se on aidosti välttämätöntä. Ne eivät ole oletustapa ominaisuuksien rakentamiseen.

Tämän ajattelutavan säilyttäminen ehkäisee liikakäyttöä: turvautukaa escape hatch -mekanismiin vasta varmistettuänne, etteivät propsit ja tila pysty ilmaisemaan toimintaa siististi.

Ennen imperatiivisen handlen lisäämistä kysykää: voidaanko tämä mallintaa tilaksi, joka yhdistyy käyttöliittymään? Jos voidaan, pysykää deklaratiivisessa mallissa. Onko kyse kohdistamisesta, vierityksestä, mittauksesta, animaatiosta tai kolmannen osapuolen toiminnosta? Jos on, imperatiivinen ratkaisu voi olla perusteltu.

Varmistakaa myös, että pinta-ala on pieni ja dokumentoitu ettekä käytä refiä vain sellaisen tiedon välittämiseen, jonka prop voisi sisältää.

Oikeat sovellukset yhdistävät molemmat lähestymistavat. Valtaosa logiikasta pysyy deklaratiivisena, ja vain pieni imperatiivisten handlejen kerros palvelee niitä harvoja vuorovaikutuksia, jotka niitä tarvitsevat.

Tämä tasapaino pitää koodin ennakoitavana ja testattavana, mutta mahdollistaa silti kohdistuksen hallinnan, median ohjaamisen ja kirjastojen integroinnin silloin, kun deklaratiivinen koodi ei yllä niihin.

React käyttää oletusarvoisesti propsien ja tilan ohjaamaa deklaratiivista käyttöliittymää, joka on ennakoitava ja testattava. Imperatiiviset handlet toimivat escape hatch -mekanismeina kohdistamiseen, vieritykseen, animaatioihin, mittaukseen ja kolmannen osapuolen DOM-ohjaukseen.

Verratkaa deklaratiivisia ja imperatiivisia modaaleja, suosikaa key-propia lomakkeiden nollaukseen ja muistakaa, että myös Next.js-reititin käyttää imperatiivisia metodeja toimintoihin. Pitäkää imperatiivinen kerros pienenä, dokumentoituna ja perusteltuna.