Функции первого класса. Функциональное программирование

Это серия статей о функциональном программировании:

1. Парадигмы программирования
2. Композиция
3. Функторы
4. Каррирование
5. Чистые функции
6. Функции первого класса (рассматривается в этой статье)

Что такое функция первого класса?

Считается, что язык программирования поддерживает функции первого класса, если он не имеет ограничений на то, как функции могут создаваться или использоваться. Говорят, что язык программирования имеет функции первого класса, когда функции в этом языке рассматриваются как любая другая переменная. В общем, языки программирования накладывают ограничения на способы манипулирования вычислительными элементами. Говорят, что элементы с наименьшими ограничениями имеют статус первого класса. Вот некоторые из "прав и привилегий" первоклассных элементов:

• Может быть назначен обычным переменным
• Передаются в качестве аргументов функциям
• Возвращается как результат функций
• Входит в любые структуры данных

Рассмотрим примеры каждого пункта.

Особенности функций первого класса

1. Функция первого класса может быть назначена обычным переменным

const string = "Foo"
const num = 2
const bool = false
const greet  = (name) => `Hello ${name}`
// ...другие примитивные типы данных

greet('John') // Hello John

2. Функция первого класса передается в качестве аргумента в другие функции

const nums = [1, 2, 3, 4, 5]

const addOne = (n) => n + 1

const addedOne = nums.map(addOne) // [2, 3, 4, 5, 6]

Есть функция addOne, которая обрабатывается как переменная и передается в функцию .map. При этом функция addOne действительно является функцией первого класса.

3. Функция первого класса возвращается как результат функции

const makeCounter = () => {
  let count = 0
  return () => ++count
}

const counter = makeCounter()

counter() // 1
counter() // 2
counter() // 3
counter() // 4

Функция makeCounter вернула функцию, которую мы присвоили переменной счетчика. Где переменная counter теперь содержит обычную функцию.

4. Функция первого класса входит в любые другие структуры данных

const wakeUp = name => `${name}, wake up early!`
const takeShower = name => `${name}, take shower!`
const workout = name => `${name}, workout!`
const shutUp = name => `${name}, shut up!`

const morningRoutines = [
    wakeUp,
    takeShower,
    workout,
    shutUp
]

morningRoutines.forEach(routine => routine('John'))
// John, wake up early!
// John, take shower!
// John, workout!
// John, shut up!

Мы можем хранить функции в массивах и, как вы уже догадались, мы также можем хранить их в объектах и так же перебирать их.

Почему функции первого класса важны

Функциональное программирование находится под сильным влиянием математики. Функциональное программирование хотело бы, чтобы математика была включена в каждую строку кода. Хотя математика состоит только из функций и переменных, она все равно очень мощная и выразительная. Это то, что пытается сделать и функциональное программирование - решать каждую отдельную проблему с использованием функций и только функций. Когда вы в языке программирования можете обращаться с функцией так же просто, как с переменной, этот язык будет гораздо более гибким и откроет много возможностей для улучшений. Функциональное программирование сделает ваш код более предсказуемым, тестируемым, повторно используемым, настраиваемым, кэшируемым, поддерживаемым, компонуемым и читабельным.

Итак, вы спросите себя: «Хорошо, я понимаю взаимосвязь между функциональным программированием и математикой, но как первоклассные функции сделают возможными все эти преимущества?» Очень хороший вопрос. Так как функциональное программирование полностью зависит от наличия привилегий функций, функции первого класса — это краеугольный камень для всех концепций функционального программирования. Наличие в языке программирования функций первого класса позволяет иметь удивительные шаблоны, которые рассмотрим далее.

Паттерны на основе функций первого класса

1. Функции высшего порядка (Higher-order functions)

Функции считаются функциями высшего порядка, когда они принимают функции в качестве аргументов (например, большинство методов Array, .map, .filter, .reduce, .every) и/или возвращают функцию в качестве результата (точно так же, как makeCounter).

2. Замыкания

Замыкание — это функция, возвращаемая «родительской» функцией, и имеющая доступ к внутреннему состоянию родительской функции. Как и в предыдущем примере с makeCounter. Чтобы уточнить, приведем еще один пример.

/*1*/ const add = (x) => (y) => x + y
/*2*/ 
/*3*/ const add5  = add(5)  // add5  = (y) => 5 + y
/*4*/ const add10 = add(10) // add10 = (y) => 10 + y
/*5*/
/*6*/ add5(1) // 6
/*7*/ add10(1) // 11

Рассмотрим каждую строчку. Строка 1: add — это функция, которая принимает первый параметр x и возвращает анонимную функцию, которая принимает второй параметр y и возвращает x + y. Строка 3: выполнение add(5) вернет функцию со значением 5 внутри нее. Компилятор/оптимизатор поймет это именно так:

const add5 = (y) => 5 + y 

Строка 4: точно такая же, как и строка 3. Выполнение add(10) вернет функцию со значением 10 внутри нее. Компилятор/Оптимизатор поймет это именно так:

const add10 = (y) => 10 + y

Строка 6 и строка 7: это обычные вызовы функций для ранее «динамически» созданных функций add5 и add10. После понимания того, что делает каждая строка, разберемся в терминологии для add, add5 и add10:

• add — функция высшего порядка. Почему? Потому что она возвращает функцию.
• Но add5 и add10 являются замыканиями. Почему? Потому что они имеют значения 5 и 10 соответственно, заключенные (связанные) в лексической области видимости их родителя и все еще доступные им. (Вот почему, когда мы вызываем add5(1), он будет использовать уже переданное 5 для add).

3. Каррирование

Это механизм применения концепции ленивых вычислений. Его мы подробно рассматривали в отдельной части.

Итоги

Функции первого класса — это не шаблон, это особенность языка программирования. Эта возможность позволяет легко обращаться с функциями как с переменными без ограничений. Наличие этой возможности делает язык более мощным и готовым к функциональному программированию. В таком языке мы можем создавать очень мощные утилиты, такие как функции высшего порядка, замыкания, каррирование и многое другое.

Содержание туториала по React Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.

Поднятие состояния на примере

В этом примере родительский компонент Accordion отображает две отдельные панели:

• Accordion
  • Panel
  • Panel

Каждый компонент Panel имеет булевское состояние isActive, которое определяет, видимо ли его содержимое.

import { useState } from 'react';

function Panel({ title, children }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>Show</button>
      )}
    </section>
  );
}

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About">
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology">
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

Обратите внимание, что нажатие кнопки одной панели не влияет на другую панель — они независимы. Но теперь предположим, что вы хотите изменить его так, чтобы в любой момент времени раскрывалась только одна панель. При таком дизайне расширение второй панели должно привести к сворачиванию первой. Как бы Вы это сделали? Чтобы согласовать эти две панели, вам нужно «поднять их состояние» до родительского компонента в три шага:

1. Удалить состояние из дочерних компонентов.
2. Передать захардкоженные данные от общего родителя.
3. Добавить состояние к общему родителю и передать его вместе с обработчиками событий.

Это позволит компоненту Accordion координировать обе панели и разворачивать только одну за раз.

Шаг 1: Удалить состояние из дочерних компонентов

Вы передадите контроль над isActive панели ее родительскому компоненту. Это означает, что вместо этого родительский компонент будет передавать isActive в Panel в качестве пропса. Начните с удаления этой строки из компонента Panel:

const [isActive, setIsActive] = useState(false);

Вместо этого добавьте isActive в список пропсов Panel:

function Panel({ title, children, isActive }) {

Теперь родительский компонент компонента Panel может управлять isActive, передавая его как проп. И наоборот, компонент Panel теперь не имеет контроля над значением isActive — теперь это зависит от родительского компонента.

Шаг 2. Передать захардкоженные данные от общего родителя

Чтобы поднять состояние, вы должны найти ближайший общий родительский компонент обоих дочерних компонентов, которые вы хотите скоординировать:

• Accordion (ближайший общий родитель)
  • Panel
  • Panel

В данном примере это компонент Accordion. Поскольку он находится над обеими панелями и может управлять их пропсами, он станет «источником правды» для той панели, которая в данный момент активна. Заставим компонент Accordion передавать жестко заданное значение isActive (например, true) на обе панели:

import { useState } from 'react';

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About" isActive={true}>
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology" isActive={true}>
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>Show</button>
      )}
    </section>
  );
}

Шаг 3: Добавить состояние к общему родителю

Поднятие состояния часто меняет характер того, что вы храните как состояние. При этом одновременно должна быть активна только одна панель. Это означает, что общий родительский компонент Accordion должен отслеживать, какая панель является активной. Вместо булевского значения он может использовать число в качестве индекса активной панели для переменной состояния:

const [activeIndex, setActiveIndex] = useState(0);

Когда activeIndex равен 0, активна первая панель, а когда 1 — вторая. При нажатии кнопки «Показать» на любой из панелей необходимо изменить активный индекс в Accordion. Panel не может установить состояние activeIndex напрямую, потому что оно определено внутри Accordion. Компонент Accordion должен явно разрешить компоненту Panel изменять свое состояние, передав обработчик событий в качестве пропса:

<>
  <Panel isActive={activeIndex === 0} onShow={() => setActiveIndex(0)}>
    ...
  </Panel>
  <Panel isActive={activeIndex === 1} onShow={() => setActiveIndex(1)}>
    ...
  </Panel>
</>

<button> внутри Panel теперь будет использовать проп onShow в качестве обработчика события click:

import { useState } from 'react';

export default function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel
        title="About"
        isActive={activeIndex === 0}
        onShow={() => setActiveIndex(0)}
      >
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel
        title="Etymology"
        isActive={activeIndex === 1}
        onShow={() => setActiveIndex(1)}
      >
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive, onShow }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? <p>{children}</p> : <button onClick={onShow}>Show</button>}
    </section>
  );
}

Это завершает подъем состояния вверх. Перемещение состояния в общий родительский компонент позволило согласовать две панели. Использование активного индекса вместо двух флажков «показано» гарантировало, что в данный момент активна только одна панель. А передача обработчика событий дочернему компоненту позволяла дочернему компоненту изменять состояние родителя.

Управляемые и неуправляемые компоненты

Обычно компонент с некоторым локальным состоянием называют "неуправляемым". Например, исходный компонент Panel с переменной состояния isActive не контролируется, поскольку его родитель не может влиять на то, активна панель или нет. Напротив, вы можете сказать, что компонент "управляется", когда важная информация в нем управляется пропсами, а не его собственным локальным состоянием. Это позволяет родительскому компоненту полностью определять свое поведение. Последний компонент Panel с пропсом isActive управляется компонентом Accordion. Неуправляемые компоненты проще использовать в своих родительских компонентах, поскольку они требуют меньшей настройки. Но они менее гибкие, когда вы хотите скоординировать их вместе. Управляемые компоненты максимально гибкие, но требуют от родительских компонентов полной настройки их пропсами. На практике «управляемый» и «неуправляемый» не являются строгими техническими терминами — каждый компонент обычно имеет некоторое сочетание локального состояния и свойств. Тем не менее, это полезный способ рассказать о том, как устроены компоненты и какие возможности они предлагают. При написании компонента учитывайте, какая информация в нем должна управляться (через пропсы), а какая информация не должна управляться (через состояние). Но вы всегда можете передумать и провести рефакторинг позже.

Единый источник правды для каждого состояния

В React приложении многие компоненты будут иметь собственное состояние. Некоторое состояние может «жить» рядом с компонентами-листьями (компонентами в нижней части дерева), такими как инпуты (<input />). Другое состояние может «жить» ближе к верху приложения. Например, даже клиентские библиотеки маршрутизации обычно реализуются путем сохранения текущего маршрута в состоянии React и передачи его в пропсах Для каждой уникальной части состояния вы выберете компонент, который «владеет» им. Этот принцип также известен как наличие «единого источника истины». Это не означает, что все состояния хранятся в одном месте, но для каждой части состояния существует определенный компонент, который содержит эту часть информации. Вместо того, чтобы дублировать общее состояние между компонентами, вы поднимете его до их общего родителя и передадите его дочерним элементам, которым оно нужно. Ваше приложение будет меняться по мере того, как вы будете над ним работать. Обычно вы перемещаете состояние вниз или назад, пока вы все еще выясняете, где «живет» каждая часть состояния. Это все часть процесса. Чтобы увидеть, как это выглядит на практике с еще несколькими компонентами, прочитайте статью Мышление в стиле React.

Резюме

• Если вы хотите скоординировать два компонента, переместите их состояние в их общий родитель.
• Затем передайте информацию через пропсы от их общего родителя.
• Наконец, передайте обработчики событий, чтобы потомки могли изменить состояние родителя.
• Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).
• Таким образом можно выделить такие случаи передачи данных в React:
  • от родительского компонента к дочернему;
  • от дочернего компонента к родительскому;
  • между соседними компонентами;
  • от компонента к компоненту-потомку (через несколько уровней вниз);
  • от компонента к компоненту-предку (через несколько уровней вверх).

Подробный разбор этих случаев с примерами вы можете найти в статье Как передавать данные между компонентами в ReactJS.