Funktioner med højere ordre: hvad de er, og et React-eksempel

Tech Jargon-serien

Der er så mange sætninger, der bliver kastet rundt på tekniske møder og konferencer, forudsat at alle allerede er nede med lingo. Jeg er ofte ikke nede med lingo. Det er almindeligt, at udviklere handler forbavset over, at jeg mangler et stykke viden.

Sandheden er, at jeg ofte bare ikke kender det rigtige ord for det. Som mennesker, men især udviklermennesker, elsker vi at afskedige dem, der ikke ”taler”, så denne serie handler om at få en solid forståelse af programmeringskoncepter, som man “skal kende”.

Mit første emne for denne serie er Higher Order-funktioner. Jeg var på et teknisk møde forleden, og vi diskuterede React og hvor svært det kan være for React newbies at komme ind i koden. Jeg nævnte, at komponenter af højere orden (HOC'er) kan være svære at forstå. Et svar var, at de ligner funktioner af højere orden, er jeg ikke enig? Og jeg sagde: "Jeg ved ikke, hvad det er." Da jeg bad om et eksempel, fik jeg at vide "kort". Jeg lavede en vittighed om, hvordan jeg ikke aner, hvad "kort" er, og vi gik videre.

Men stadig: hvad er en højere ordensfunktion?

(Bemærk: alle de givne eksempler findes i Javascript, men dette koncept gælder for ethvert programmeringssprog.)

Højere ordensfunktioner: en definition

En højere ordensfunktion er en, som enten a) tager en funktion som et argument eller b) returnerer en funktion.

Hvis en funktion ikke gør nogen af ​​disse ting, er det en første ordens funktion .

Kort

Lad os starte med det eksempel jeg fik: map.

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

Den mapfunktion kaldes på en matrix og tager et ”tilbagekald” funktionen. Den anvender funktionen på hvert af elementerne i arrayet og returnerer et nyt array. [1, 2, 3]er vores array og num => num * 2 er vores funktion. En tilbagekaldelse er funktionsargumentet, der sendes til vores højere ordensfunktion.

Denne HOF er bagt ind i sproget, prototypet på Array ( Array.prototype.map).

Andre eksempler på Hofs prototype på Array er filter, reduceog some.

Brugerdefineret eksempel

Så lad os skrive vores egen højere ordensfunktion.

Bestået funktion

const myFunc = age => age * 2

Funktion med højere ordre

Nu skriver vi en funktion, der tager en funktion ind.

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

Vi sender et tal til hof, som tilføjer 5 og derefter kalder vores beståede funktion, som vil fordoble det. Hvis vi passerer 10, passerer vi 15 til vores første funktion, som derefter fordobles til 30.

Brugerdefineret eksempel med React “komponenter”

Som jeg bemærkede ovenfor, kom dette emne op med henvisning til React's komponenter. Da en React-komponent er en funktion, når vi overfører den til en anden funktion, opretter vi vores egen højere ordensfunktion, som React kalder "komponenter af højere orden". Hvis du bruger stateful komponenter (og udvider React's Component), bruger du allerede HOC'er.

Statsløs komponent

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

Vi har en funktion, kaldet details, som vi passerer ind i props. Vi dekonstruerer dem, når de kommer ind og tildeler dem til lokale variabler nameog randomNum. Dette er ES6-syntaks - hvis det ser ukendt ud, skal du give det en google (du vil elske det).

Dette er en første ordens funktion - det tager et argument (et propsobjekt) og returnerer en skabelon bogstavelig.

Komponent af højere orden

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

Dette er en højere ordensfunktion - den tager en funktion ind (den component, som den derefter kalder og sender ekstra rekvisitter). Dette er et ekstremt grundlæggende eksempel på, hvad hver statsløs React-komponent gør.

Du kan anvende dette mønster til abstrakt kode, der deles mellem mange komponenter i din applikation.

Spekulerer du på, om du kan rede funktioner af højere orden? Du kan! Men vær forsigtig. Abstraktioner skal gøre koden lettere at læse og arbejde med . Det er let at komme ned ad en sti her, hvor din kode er så stump, at ingen kan finde ud af, hvordan man gør noget.

Referencer

  • Funktion med højere ordre, Wikipedia
  • Funktioner med højere ordre, veltalende Javascript (kapitel 5)
  • Array.prototype MDN dokumenterer.