Funkcije višeg reda: što su i primjer React-a

Programiranje

Serija Tech Jargon

Postoji toliko puno fraza koje se bacaju na tehnološka okupljanja i konferencije, pod pretpostavkom da su svi već dolje s jezikom. Često nisam s jezikom. Uobičajeno je da se programeri ponašaju zaprepašteno što mi nedostaje znanje.

Istina je da često jednostavno ne znam pravu riječ za to. Kao ljudi, ali posebno ljudi koji razvijaju programe, volimo odbaciti one koji ne „govore“, tako da ova serija govori o solidnom razumijevanju programskih koncepata koje treba „znati“.

Moja prva tema za ovu seriju su funkcije višeg reda. Bio sam na tehnološkom sastanku neki dan i razgovarali smo o Reactu i o tome koliko teško može biti React početnicima da uđu u kod. Spomenuo sam da komponente visokog reda (HOC) može biti teško razumjeti. Odgovor je bio da su slične funkcijama višeg reda, zar se ne slažem? A ja sam rekao: "Ne znam što je to." Kad sam pitao za primjer, rekli su mi "karta". Šalio sam se kako nemam pojma što je "karta" i krenuli smo dalje.

Ali ipak: što je funkcija višeg reda?

(Napomena: svi navedeni primjeri su u Javascriptu, ali ovaj se koncept odnosi na svaki programski jezik.)

Funkcije višeg reda: definicija

Funkcija višeg reda je ona koja ili) uzima funkciju kao argument ili b) vraća funkciju.

Ako funkcija ne radi niti jednu od tih stvari, to je funkcija prvog reda .

Karta

Počnimo s primjerom sam dao: map.

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

mapPozove funkcija na polja i ima funkciju „povratni poziv”. Primjenjuje funkciju na svaku od stavki u nizu, vraćajući novi niz. [1, 2, 3]je naš niz i num => num * 2 je naša funkcija. Povratni poziv je argument funkcije prosljeđen našoj funkciji višeg reda.

Ovaj je HOF ubačen u jezik, prototipiran na Array ( Array.prototype.map).

Drugi primjeri HOFs konstruirana na Array su filter, reducei some.

Prilagođeni primjer

Pa napišimo vlastitu funkciju višeg reda.

Prošla funkcija

const myFunc = age => age * 2

Funkcija višeg reda

Sada napišemo funkciju koja preuzima funkciju.

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

Proslijedit ćemo broj hofkojem ćemo dodati 5, a zatim nazvati našu prosljeđenu funkciju koja će ga udvostručiti. Ako prođemo 10, prelazimo 15 na našu prvu funkciju, koja se potom udvostručuje na 30.

Prilagođeni primjer s React “komponentama”

Kao što sam gore napomenuo, ova se tema pojavila u vezi s Reactovim komponentama. Kako je React komponenta funkcija, prilikom prenošenja na drugu funkciju, stvaramo vlastitu funkciju višeg reda, koju React naziva „komponentama višeg reda“. Ako koristite komponente sa Componentstatusom (i proširujete React-ove ), već koristite HOC-ove.

Komponenta bez državljanstva

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

Imamo pozvanu funkciju detailsu koju prelazimo props. Dekonstruiramo ih kako ulaze i dodjeljujemo lokalnim varijablama namei randomNum. Ovo je sintaksa ES6 - ako izgleda nepoznato, dajte joj google (svidjet će vam se).

Ovo je funkcija prvog reda - uzima jedan argument ( propsobjekt) i vraća literal predloška.

Komponenta višeg reda

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

Ovo je funkcija višeg reda - ona uzima funkciju ( componentkoju zatim poziva, prosljeđujući dodatne rekvizite). Ovo je izuzetno osnovni primjer onoga što radi svaka React komponenta bez državljanstva.

Ovaj obrazac možete upotrijebiti za apstrahiranje koda koji se dijeli između mnogih komponenata u vašoj aplikaciji.

Pitate li se možete li ugnijezditi funkcije višeg reda? Možeš! Ali budi pažljiv. Apstrakcije trebaju olakšati čitanje i rad s kodom . Ovdje je lako doći putem gdje je vaš kôd toliko tup da nitko ne može shvatiti kako što učiniti.

Reference

  • Funkcija višeg reda, Wikipedia
  • Funkcije višeg reda, rječit Javascript (poglavlje 5)
  • Array.prototype MDN dokumenti.