Korkeamman tason toiminnot: mitä ne ovat, ja reagoiva esimerkki

Tech Jargon -sarja

On niin monia lauseita, jotka heitetään ympäri tech-tapaamisia ja konferensseja olettaen, että kaikki ovat jo alhaalla kielellä. En ole usein alareunassaan. On tavallista, että kehittäjät hämmästyivät siitä, että minulta puuttuu osa tietoa.

Totuus on, että en vain vain tiedä sitä oikealla sanalla. Ihmisinä, mutta etenkin kehittäjinä, rakastamme irtisanoa niitä, jotka eivät “puhu puhetta”, joten tämän sarjan tarkoitus on saada selkeä käsitys ohjelmointikäsityksistä, jotka ”pitäisi tietää”.

Ensimmäinen aiheeni tässä sarjassa on korkeamman tason toiminnot. Olin toisena päivänä teknisenä pidetyssä kokouksessa, ja keskustelimme Reaktista ja siitä, kuinka vaikeaa voi olla Reaktan aloittelijoiden pääsy koodiin. Mainitsin, että korkeamman asteen komponentteja (HOC) voi olla vaikea ymmärtää. Vastaus oli, että ne ovat paljon kuin korkeamman asteen toimintoja, enkö ole samaa mieltä? Ja sanoin: “En tiedä mikä se on.” Kun kysyin esimerkkiä, minulle sanottiin “kartta”. Tein vitsin siitä, kuinka minulla ei ole aavistustakaan, mikä on “kartta”, ja jatkoimme.

Mutta silti: mikä on korkeamman asteen funktio?

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

Korkeamman tason toiminnot: määritelmä

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

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

Kartta

Aloitetaan esimerkistä, joka minulle annettiin: kartta.

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

Karttatoiminto kutsutaan matriisiin, ja se ottaa ”takaisinsoitto” -toiminnon. Se käyttää toimintoa jokaisessa taulukon kohteessa palauttaen uuden taulukon. [1, 2, 3] on ryhmämme ja num => num * 2 on funktiomme. Soittopyyntö on funktion argumentti, joka välitetään korkeamman asteen funktiolle.

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

Muita esimerkkejä HOF-prototyypeistä Array-järjestelmässä ovat suodatus, pelkistys ja jotkut.

Muokattu esimerkki

Joten kirjoitetaan oma korkeamman asteen toiminto.

Hyväksytty toiminto

const myFunc = ikä => ikä * 2

Korkeamman tason toiminto

Nyt kirjoitamme funktion, joka ottaa funktion.

const hof = (customFunc, ikä) => customFunc (ikä + 5)

Annamme numeron hof: lle, joka lisää 5: n ja soitamme sitten ohitetulle toiminnollemme, joka kaksinkertaistaa sen. Jos ohitamme 10, siirrymme 15 ensimmäiseen toimintoomme, joka sitten kaksinkertaistuu 30: een.

Kuollut, yksinkertainen, korkeamman asteen toiminto, joka toimii terminaalissa

Muokattu esimerkki reagoida “komponentit”

Kuten edellä totesin, tämä aihe tuli esille Reaktorin komponenteissa. Koska React-komponentti on funktio, luodessamme sen toiseen funktioon luomme oman korkeamman asteen funktion, jota React kutsuu ”korkeamman asteen komponenteiksi”. Jos käytät tilallisia komponentteja (ja laajennat Reaktin komponenttia), käytät jo HOC-komponentteja.

Valtiottomat komponentit

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

Meillä on yksityiskohtaksi kutsuttu toiminto, johon välitämme rekvisiitta. Olemme purkamassa niitä tullessaan ja määrittämällä ne paikallisille muuttujille nimelle ja randomNum. Tämä on ES6-syntaksi - jos se näyttää vieraalta, anna sille google (rakastat sitä).

Tämä on ensimmäisen kertaluvun funktio - se vie yhden argumentin (rekvisioobjekti) ja palauttaa mallipohjan.

Korkeamman asteen komponentti

const hoc = (komponentti, rekvisiitta) => {
  const randomNum = Math.floor (Math.random () * 100)
  palautuskomponentti ({... rekvisiitta, randomNum})
}

Tämä on korkeamman asteen toiminto - se ottaa funktion (komponentti, jota se sitten kutsuu, kuljettaen ylimääräisiä rekvisiitta). Tämä on erittäin yksinkertainen esimerkki siitä, mitä jokainen valtioton React-komponentti tekee.

Superkonsultti

Voit käyttää tätä mallia abstraktiin koodiin, joka on jaettu sovelluksen useille komponenteille.

Haluatko pesätä korkeamman asteen toimintoja? Sinä pystyt! Mutta ole varovainen. Abstraktien tulisi tehdä koodista helpompi lukea ja työskennellä. Täältä on helppo päästä tielle, jolla koodisi on niin räikeä, ettei kukaan voi selvittää, miten tehdä mitään.

Viitteet

  • Yläjärjestys-toiminto, Wikipedia
  • Yläjärjestyksen toiminnot, Eloquent Javascript (luku 5)
  • Array.prototype MDN docs.