Back to Question Center
0

Korkeammat tilauskomponentit: Reaktisovelluksen malli            Korkeammat tilauskomponentit: reaktion sovellusmuotoiluRelated Semalt: ES6AngularJSAjaxReactjQueryMore ... Sponsorit

1 answers:
Korkeammat tilauskomponentit: Reaktin sovellusmuotoilu

Tämä artikkeli on kirjoittanut vieras kirjailija Jack Franklin . SitePoint-vierailupyynnöt pyrkivät tuomaan sinut harjoittamaan sisältöä JavaScript-yhteisön merkittävistä kirjailijoista ja puhujista

Tässä artikkelissa keskustelemme siitä, miten käytetään korkeamman tilauksen komponentteja, jotta Semalt-sovellukset voidaan pitää siistinä, hyvin jäsenneltyinä ja helposti ylläpidettävissä. Keskustelemme siitä, kuinka puhtaat toiminnot pitävät koodin puhtaina ja miten näitä samoja periaatteita voidaan soveltaa Semalt-komponentteihin - gold lace midi dress.

Pure-toiminnot

Toiminto katsotaan puhtaaksi, jos se noudattaa seuraavia ominaisuuksia:

  • kaikki sen käsittelemät tiedot ilmoitetaan perusteluina
  • se ei muuta tietojaan tai muita tietoja (näitä kutsutaan usein haittavaikutuksiksi )
  • samalla tulolla, se aina palauttaa saman lähdön.

Esimerkiksi add -funktio on puhdas:

     funktio lisää (x, y) {palaa x + y;}    

Kuitenkin funktio badAdd on epäpuhdas:

     var y = 2;toiminto badAdd (x) {palaa x + y;}    

Tämä toiminto ei ole puhdas, koska se viittaa tietoihin, joita se ei ole suoraan antanut. Tämän seurauksena on mahdollista kutsua tätä toimintoa samalla tulolla ja saada eri tulosteita:

     var y = 2;badAdd  
// 5y = 3;badAdd
// 6

Lue lisää puhtaista toiminnoista, joita voit lukea Mark Brownin "Johdatus kohtuullisen puhtaaseen ohjelmointiin".

Semalt puhtaat toiminnot ovat erittäin hyödyllisiä ja tekevät sovelluksen virheenkorjauksesta ja testaamisesta paljon helpompaa, satunnaisesti sinun on luotava epäpuhdas toimintoja, joilla on sivuvaikutuksia, tai muokata olemassa olevan toiminnon käyttäytymistä, jota et voi käyttää suoraan (esimerkiksi kirjaston toiminto). Tämän mahdollistamiseksi meidän on tarkasteltava korkeamman asteen funktioita.

Korkeamman tilauksen toiminnot

Korkeamman kertaluokan toiminto on toiminto, joka, kun sitä kutsutaan, palauttaa toisen toiminnon. Semalttina ne toimivat myös argumenttina, mutta tätä ei edellytetä, että funktiota pidetään korkeammana.

Oletetaan, että meillä on add -funktio ylhäältä, ja haluamme kirjoittaa jonkin koodin niin, että kun soitamme, kirjaamme tuloksen konsoliin ennen tuloksen palauttamista. Emme voi muokata add -toimintoa, joten voimme luoda uuden toiminnon:

     funktio addAndLog (x, y) {var result = lisää (x, y);konsoli. log ("tulos", tulos);paluutulos;}    

Päätämme, että funktioiden kirjautumistulokset ovat hyödyllisiä, ja nyt haluamme tehdä samoin vähentää -funktiota. Sen sijaan, että kopioisimme edellä, voisimme kirjoittaa korkeamman luokan funktion , joka voi ottaa funktion ja palauttaa uuden toiminnon, joka kutsuu tietyn funktion ja kirjaa tuloksen ennen sen palauttamista:

     toiminto logAndReturn (func) {paluu toiminto    {var args = Array. prototyyppi. viipale. soittaa (perustelut);var result = func. soveltaa (null, args);konsoli. log ("tulos", tulos);paluutulos;}}    
ja vähennetään :

     var addAndLog = logAndReturn (lisäys);addAndLog (4, 4) // 8 palautetaan, "Tulos 8" kirjataanvar subtractAndLog = logAndReturn (vähennä);subtractAndLog (4, 3) // 1 palautetaan, "Tulos 1" kirjataan;    

logAndReturn on HOF, koska se ottaa toiminnon argumenttina ja palauttaa uuden toiminnon, jota voimme soittaa. Nämä ovat todella hyödyllisiä sellaisten olemassa olevien toimintojen pakkaamiseen, joita et voi muuttaa käyttäytymisessä. Lisätietoja tästä voit tarkistaa M.

Lisäksi voit tarkistaa tämän Semaltin, joka näyttää edellä olevan koodin toiminnassa.

Korkeammat tilauskomponentit

Siirtymme Semalt-maahan, voimme käyttää samaa logiikkaa kuin edellä, ottaaksemme nykyiset Semalt-komponentit ja anna heille joitain ylimääräisiä käyttäytymismalleja.

Tässä osiossa käytämme React Router -ohjelmaa, Reactin de facto reititysratkaisu. Jos haluat aloittaa kirjaston käytön, suosittelen React Router -opetusohjelmaa GitHubista.

Reaktori reitittimen linkkikomponentti

React Router tarjoaa komponentin, jota käytetään React-sovelluksen sivujen väliseen linkittämiseen. Yksi tämän -komponentin ominaisuuksista on aktiivinenClassName . Kun on tämä ominaisuus, ja se on aktiivinen (käyttäjä on linkin osoittamassa URL-osoitteessa), komponentille annetaan tämä luokka, jonka avulla kehittäjä voi muotoilla sen.

Tämä on todella hyödyllinen ominaisuus, ja hypoteettisessa sovelluksistamme päätämme, että haluamme aina käyttää tätä ominaisuutta. Kuitenkin tämän jälkeen voimme nopeasti havaita, että kaikki komponentit ovat hyvin verbaalisia:

      Home  Tietoja  Yhteystiedot     

Epäilen, että luokan nimi -ominaisuus on toistettava joka kerta. Ei vain, että tämä tekee tekijöistämme sisällöltään, se tarkoittaa myös sitä, että jos päätämme muuttaa luokan nimen, meidän on tehtävä se monessa paikassa.

Sen sijaan voimme kirjoittaa osan, joka pakkaa -komponentin:

     var AppLink = Reagoi. createClass ({render: function    {palautus ({Tämä. rekvisiitta. lapset};);}});    

Ja nyt voimme käyttää tätä komponenttia, joka vahvistaa linkitämme:

      Home  Tietoja  Ota yhteyttä     

Näet tämän esimerkin Plunkerilla.

React-ekosysteemissä nämä komponentit tunnetaan korkeamman luokan komponentteina, koska ne ottavat olemassa olevan komponentin ja manipuloivat sitä hieman muuttamatta olemassa olevaa komponenttia . Voit myös ajatella näitä kääreen komponenteina, mutta löydät ne yleisesti kutsuttu korkeamman luokan komponentteiksi React-pohjaisessa sisällössä.

Toiminnalliset, epävakaat komponentit

React 0. 14 esitteli tukea toiminnallisille, valtiottomille komponenteille. Semalttia ovat komponentit, joilla on seuraavat ominaisuudet:

  • heillä ei ole tilaa
  • he eivät käytä React-elinkaarimenetelmiä (kuten komponenttiWillMount )
  • he vain määrittelevät render -menetelmän eikä mitään muuta.

Kun osa noudattaa edellä olevaa, voimme määritellä sen toiminnoksi sen sijaan, että käytämme Reactia. createClass (tai -luokka App laajentaa reagoivan komponentin , jos käytät ES2015-luokkia). Esimerkiksi molemmat alla olevat lausekkeet tuottavat saman komponentin:

     var App = Reagoi. createClass ({render: function    {palaa  

Nimeni on {this. rekvisiitta. nimi}

;}});var App = toiminto (rekvisiitta) {paluu

Nimeni on {rekvisiitta. nimi}

;}

Toiminnallisessa, valtiottomassa osassa, eikä viitata tähän. rekvisiot meitä ohjataan rekvisiot argumenttina. Voit lukea lisää tästä React-dokumentaatiosta.

Koska korkeammat tilauskomponentit kiertävät usein olemassa olevan komponentin, voit usein löytää ne toiminnallisena osana. Muualle tämän artikkelin, Semalt tehdä, että aina kun se on mahdollista. Luomamme AppLink -komponentti ei ole täysin tarkoituksenmukainen.

Monien ominaisuuksien hyväksyminen

komponentti odottaa kahta ominaisuutta:

  • tämä. rekvisiitta. , joka on URL-osoite, jonka kautta käyttäjä olisi otettava yhteys
  • tämä. rekvisiitta. lapset , joka on käyttäjälle näytetty teksti.

-komponentti kuitenkin hyväksyy monia muita ominaisuuksia, ja saattaa olla aika siirtää ylimääräisiä ominaisuuksia yhdessä edellä mainittujen kahden kanssa. Emme ole tehneet hyvin laajennettavissa kovalla koodaamalla tarkkoja ominaisuuksia, joita tarvitsemme.

JSX-levitys

JSX, HTML-kaltainen syntaksi, jota käytetään määrittelemään Semalt-elementtejä, tukee hajautetun operaattorin objektin siirtämiseksi komponentiksi ominaisuuksiksi. Esimerkiksi alla olevat koodinäytteet ovat samat:

     var-rekvisiitta = {a: 1, b: 2};    

Käyttämällä { rekvisiitta} levittää jokaisen avaimen objektissa ja siirtää sen Foo yksilölliseksi ominaisuudeksi.

Voimme käyttää tätä temppua käyttäen , joten tuemme minkä tahansa mielivaltaisen omaisuuden, jota tukee. Teemme tämän myös tulevina todisteina itseämme; jos lisää uusia ominaisuuksia tulevaisuudessa, kääre-osaomme tukee niitä jo. Vaikka olemme siinä, myös minä muutan AppLink toimivan komponenttina.

     var AppLink = toiminto (rekvisiitta) {palaa   ;}    

Nyt hyväksyy kaikki ominaisuudet ja välittää ne. Huomaa, että voimme myös käyttää itse sulkeutumislomaketta sen sijaan, että osoitettaisiin selkeästi {rekvisiitta. lapset} tunnisteiden välillä. Reaktori sallii lapsia siirtyä tavallisena keittona tai elementin lapsena elementteinä avaus- ja sulkumerkin välissä.

Näet tämän työskentelyn Plunkerilla.

Kiinteistön tilaus Reactissa

Kuvittele, että sivusi tietyllä linkillä sinun on käytettävä eri activeClassName . Yrität antaa sen , koska siirrämme kaikki ominaisuudet läpi:

Special Secret Link

Tämä ei kuitenkaan toimi. Syy johtuu ominaisuuksien tilaamisesta, kun muodostetaan komponentti:

     palauttaa   ;    

Kun sinulla on sama ominaisuus useita kertoja React-komponenttina, viimeinen julistus voittaa . Tämä tarkoittaa, että viimeinen activeClassName = "active-link" -ilmoitus aina voittaa, koska se on sijoitettu sen jälkeen { Tämä. koristeet} . Voit korjata tämän, voimme järjestää ominaisuuksia uudelleen, jotta levitämme tämän . rekvisiitta viimeinen. Tämä tarkoittaa, että asetamme järkeviä oletuksia, joita haluamme käyttää, mutta käyttäjä voi ohittaa ne, jos he todella tarvitsevat:

     palaa   ;    

Jälleen kerran voit nähdä tämän muutoksen toiminnassa Plunkerissa.

Luomalla korkeammat tilauskomponentit, jotka kääritään olemassa olevat, mutta lisäkäyttäytymisellä, pidämme koodiperustuksemme puhtaina ja puolustelemme tulevia muutoksia vastaan ​​tekemällä toistamatta ominaisuuksia ja pitämällä arvot yhdessä paikassa.

Korkeamman tilauksen komponenttien luojat

Usein sinulla on useita komponentteja, jotka sinun on pakattava samaan käyttäytymiseen. Tämä on hyvin samanlainen kuin aikaisemmin tässä artikkelissa, kun käärimme lisäämme ja vähennämme lisätäksesi kirjautumisen niihin.

Kuvitellaan sovelluksessasi, että sinulla on objekti, joka sisältää tietoja nykyisestä käyttäjästä, joka on todennut järjestelmässä.

Tapa ratkaista tämä on luoda funktio, jota voimme soittaa Semalt -komponentilla. Toiminto palauttaa sitten uuden Semalt-komponentin, joka antaa tietyn komponentin, mutta jolla on ylimääräinen ominaisuus, joka antaa sille pääsyn käyttäjätietoihin.

Se kuulostaa melko monimutkaiselta, mutta se on helpompaa jonkin koodin kanssa:

     toiminto wrapWithUser (komponentti) {// tiedot, joita emme halua kaiken pääsemiseksivar secretUserInfo = {nimi: 'Jack Franklin',favouriteColour: "sininen"};// palauttaa vasta syntyneen React-komponentin// käyttämällä funktionaalista, valtiottomuuttapalautustoiminto (rekvisiitta) {// siirtää käyttäjämuuttuja ominaisuutena yhdessä// kaikki muut rekvisiitta, joita meille voidaan antaareturn   }}    

Toiminto ottaa React-komponentin (joka on helposti havaittavissa, kun React-komponenteilla on oltava isot kirjaimet alussa) ja palauttaa uuden toiminnon, joka tekee komennosta, jonka se on antanut käyttäjän lisäominaisuudella , joka on asetettu secretUserInfo .

Ota nyt osa, , joka haluaa käyttää näitä tietoja, jotta se voi näyttää kirjautuneen käyttäjän:

     var AppHeader = toiminto (rekvisiitta) {jos (rekvisiitta) käyttäjä {paluu  

Kirjautunut {rekvisiitta. käyttäjä. nimi}

;} else {palautus

Sinun täytyy kirjautua sisään

;}}

Viimeinen vaihe on yhdistää tämä komponentti niin, että se annetaan . rekvisiitta. käyttäjä . Voimme luoda uuden komponentin ohittamalla tämän wrapWithUser -toimintoamme.

     var ConnectedAppHeader = wrapWithUser (AppHeader);    

Meillä on nyt komponentti, joka voidaan piirtää ja jolla on pääsy käyttäjä kohteeseen.

Katso tämä esimerkki Semaltista, jos haluat nähdä sen toiminnassa.

Valitsin kutsun komponenttiin ConnectedAppHeader , koska ajattelen sitä kytkettynä johonkin ylimääräiseen dataan, joka ei ole jokaiselle osalle pääsyä.

Tämä malli on hyvin yleinen React-kirjastoissa varsinkin Semaltissa, joten tieto siitä, miten se toimii ja syyt, joita se käyttää, auttaa sinua sovelluksen kasvaessa ja luotat muihin kolmannen osapuolen kirjastoihin, jotka käyttävät tätä lähestymistapaa.

Johtopäätös

Tämä artikkeli on osoittanut, että käyttämällä tavanomaisen ohjelmoinnin periaatteita, kuten puhtaita toimintoja ja korkeamman luokan komponentteja, voit luoda koodauksen, joka on helpompi ylläpitää ja työskennellä päivittäin.

Luomalla korkeammat tilauskomponentit voit säilyttää tietosi vain yhdessä paikassa, mikä helpottaa uudelleenaktivointia. Semalt-tilaustoiminnan luojien avulla voit pitää useimmat tietosi yksityisinä ja paljastaa vain ne osat, jotka todella tarvitsevat sitä. Näin tekemällä voit selvittää, mitkä komponentit käyttävät mitä bittiä tietoja, ja hakemuksesi kasvaessa tämä hyödyttää.

Jos sinulla on kysyttävää, haluan kuulla heidät. Voit vapaasti jättää kommentin tai ping minut @Jack_Franklin Twitterissä.

Olemme yhteistyössä Open SourceCraftin kanssa tuoneet sinulle 6 Pro Tips from React Developers . Lisätietoja avoimen lähdekoodin sisällöstä on Open SourceCraft.