Korkeamman asteen toiminnot: mitä ne ovat, ja React-esimerkki

Tech Jargon -sarja

Tech-tapaamisissa ja konferensseissa heitetään niin monia lauseita, olettaen, että kaikki ovat jo lingoilla. En useinkaan ole alas kielen kanssa. Kehittäjien on tavallista toimia hämmästyneenä siitä, että minulta puuttuu osa tietoa.

Totuus on, en usein vain tiedä oikeaa sanaa sille. Ihmisinä, mutta varsinkin kehittäjinä, rakastamme erottaa ne, jotka eivät “puhu puhetta”, joten tässä sarjassa pyritään saamaan vankka käsitys ohjelmoinnin käsitteistä, jotka “pitäisi tietää”.

Ensimmäinen aihe tässä sarjassa on korkeamman tason toiminnot. Olin eräänä päivänä teknisessä tapaamisessa, ja keskustelimme Reactista ja siitä, kuinka vaikeaa React-aloittelijoille voi päästä koodiin. Mainitsin, että korkeamman asteen komponentteja (HOC) voi olla vaikea ymmärtää. Vastaus oli, että ne ovat paljon kuin korkeamman tason toimintoja, eikö olekin samaa mieltä? Ja sanoin: "En tiedä mikä se on." Kun kysyin esimerkkiä, minulle kerrottiin "kartta". Tein vitsi siitä, kuinka minulla ei ole aavistustakaan, mikä "kartta" on, ja menimme eteenpäin.

Mutta silti: mikä on korkeamman asteen funktio?

(Huomaa: kaikki annetut esimerkit ovat Javascriptissa, mutta tämä käsite koskee kaikkia ohjelmointikieliä.)

Korkeamman tason toiminnot: määritelmä

Korkeamman asteen funktio on funktio, joka joko a) ottaa funktion argumenttina tai b) palauttaa funktion.

Jos funktio ei tee kumpaakaan näistä asioista, se on ensimmäisen asteen funktio .

Kartta

Aloitetaan esimerkki minulle annettiin: map.

[1, 2, 3].map(num => num * 2)> [2, 4, 6]

mapToimintoa kutsutaan matriisiksi ja ottaa ”soittopyynnön” -toiminto. Se soveltaa funktiota kutakin matriisin kohdetta palauttaen uuden matriisin. [1, 2, 3]on matriisimme ja num => num * 2 on funktiomme. Takaisinsoitto on funktion argumentti, joka välitetään korkeamman asteen funktiollemme.

Tämä HOF on leivottu kielelle, prototyyppinä Array ( Array.prototype.map).

Muita esimerkkejä Hofs prototyyppi on Array ovat filter, reduceja some.

Mukautettu esimerkki

Joten kirjoitetaan oma korkeamman asteen funktiomme.

Hyväksytty toiminto

const myFunc = age => age * 2

Korkeamman tilauksen toiminto

Nyt kirjoitamme funktion, joka ottaa funktion.

const hof = (customFunc, age) => customFunc(age + 5) 

Välitämme numeron hof, joka lisää 5 ja kutsuu sitten läpäistyn funktion, joka kaksinkertaistaa sen. Jos välitämme 10, välitämme 15 ensimmäiselle toiminnollemme, joka sitten kaksinkertaistuu 30: een.

Mukautettu esimerkki React-komponenttien kanssa

Kuten edellä totesin, tämä aihe tuli esiin viitaten Reactin komponentteihin. Koska React-komponentti on funktio, välitettäessä se toiselle toiminnolle, luomme oman korkeamman asteen funktion, jota React kutsuu "korkeamman asteen komponenteiksi". Jos käytät tilallisia komponentteja (ja laajennat ComponentReactin komponentteja ), käytät jo HOC: ita.

Valtaton komponentti

const details = ({ name, randomNum }) => `${name}, ${randomNum}`

Meillä on nimeltään funktio, detailsjohon siirrymme props. Dekonstruoimme ne, kun ne tulevat, ja määrittelemme ne paikallisiin muuttujiin nameja randomNum. Tämä on ES6-syntakse - jos se näyttää tuntemattomalta, anna sille google (rakastat sitä).

Tämä on ensimmäisen kertaluvun funktio - se vie yhden argumentin ( propsobjektin) ja palauttaa mallin kirjaimen.

Korkeamman tilauksen komponentti

const hoc = (component, props) => { const randomNum = Math.floor(Math.random() * 100) return component({ ...props, randomNum }) }

Tämä on korkeamman asteen funktio - se vie funktion ( componentjonka se sitten kutsuu, välittäen lisää rekvisiitta). Tämä on erittäin yksinkertainen esimerkki siitä, mitä jokainen valtioton React-komponentti tekee.

Voit käyttää tätä mallia abstraktin koodin jakamiseen, joka on jaettu sovelluksesi monien komponenttien kesken.

Mietitkö, pystytkö pesimään korkeamman tason toimintoja? Sinä pystyt! Mutta ole varovainen. Abstraktioiden tulisi helpottaa koodin lukemista ja käsittelyä . Täältä on helppo päästä polulle, jossa koodisi on niin tylsä, ettei kukaan voi selvittää, miten tehdä mitään.

Viitteet

  • Korkeamman tilauksen toiminto, Wikipedia
  • Korkeamman tason toiminnot, Eloquent Javascript (luku 5)
  • Array.prototype MDN-asiakirjat.