Функции от по-висок ред: какви са те и пример на React

Серия Tech Jargon

Има толкова много фрази, които се хвърлят наоколо по време на технически срещи и конференции, като се предполага, че всички вече са с ланг. Често не съм с ланг. Обикновено разработчиците се държат учудени, че ми липсват част от знанията.

Истината е, че често просто не знам точната дума за това. Като хора, но особено хора разработчици, ние обичаме да отхвърляме онези, които не „говорят говоренето“, така че тази серия е за постигане на солидно разбиране на програмните концепции, които човек „трябва да знае“.

Първата ми тема за тази поредица са функциите с по-висок ред. Онзи ден бях на техническа среща и обсъждахме React и колко трудно може да бъде начинаещите React да влязат в кода. Споменах, че компонентите от по-висок клас (HOC) могат да бъдат трудни за разбиране. Отговорът беше, че много приличат на функции от по-висок ред, не съм ли съгласен? И аз казах: „Не знам какво е това.“ Когато поисках пример, ми казаха „карта“. Шегувах се как нямам представа какво е „карта“ и продължихме.

Но все пак: какво е функция от по-висок ред?

(Забележка: всички примери са в Javascript, но тази концепция се прилага за всеки език за програмиране.)

Функции от по-висок ред: определение

Функция от по-висок ред е тази, която или a) приема функция като аргумент, или b) връща функция.

Ако дадена функция не прави нито едно от тези неща, това е функция от първи ред.

карта

Да започнем с примера, който ми беше даден: карта.

[1, 2, 3]. Карта (num => число * 2)
> [2, 4, 6]

Функцията за карта се извиква на масив и приема функция за „обратно извикване“. Той прилага функцията към всеки от елементите в масива, връщайки нов масив. [1, 2, 3] е нашия масив, а num => num * 2 е нашата функция. Обратното извикване е функционалният аргумент, предаден на функцията ни от по-висок ред.

Този HOF е изпечен на езика, прототипиран в Array (Array.prototype.map).

Други примери на HOFs, прототипирани в Array, са филтриране, намаляване и някои.

Персонализиран пример

Така че нека да напишем нашата собствена функция от по-висок ред

Пасирана функция

const myFunc = age => възраст * 2

Функция от по-висок ред

Сега пишем функция, която приема функция.

const hof = (customFunc, възраст) => customFunc (възраст + 5)

Ще предадем номер на hof, който ще добави 5 и след това ще извикаме преминаващата ни функция, която ще го удвои. Ако преминем 10, преминаваме 15 към първата ни функция, която след това се удвоява на 30.

Нашата мъртва проста функция от по-висок ред, работеща в терминала

Персонализиран пример с „компоненти“ React

Както отбелязах по-горе, тази тема се появи във връзка с компонентите на React. Тъй като React компонент е функция, когато го предаваме на друга функция, ние създаваме своя собствена функция от по-висок ред, която React нарича „компоненти от по-висок ред“. Ако използвате състоятелни компоненти (и разширявате React's Component), вече използвате HOCs.

Компонент без гражданство

подробности за const = ({име, случаен номер}) =>
  `$ {name}, $ {randomNum}`

Имаме функция, наречена подробности, в която предаваме реквизити. Деконструираме ги при влизането им и ги причисляваме към име на локални променливи и randomNum. Това е синтаксис на ES6 - ако изглежда непознат, дайте му google (ще ви хареса).

Това е функция от първи ред - тя отнема един аргумент (реквизитен обект) и връща шаблонния буквал.

Компонент от по-висок ред

const hoc = (компонент, подпори) => {
  const randomNum = Math.floor (Math.random () * 100)
  връщащ компонент ({... реквизит, randomNum})
}

Това е функция от по-висок ред - тя отнема функция (компонента, който след това извиква, предавайки допълнителни реквизити). Това е изключително основен пример за това, което прави всеки компонент React без гражданство.

Нашият супер основен „компонент“ работи в конзолата

Можете да използвате този образец за абстрактен код, който се споделя между много компоненти в приложението ви.

Чудите ли се дали можете да влагате функции от по-висок ред? Можеш! Но внимавай. Абстракциите трябва да улеснят кода за четене и работа. Лесно е да слезете по пътека тук, където кодът ви е толкова тъп, че никой не може да измисли как да направи нещо.

Препратки

  • Функция с по-висок ред, Уикипедия
  • Функции от по-висок ред, Красноречив Javascript (глава 5)
  • Array.prototype MDN документи.