Функции первого класса. Функциональное программирование
2 года назад·4 мин. на чтение
В этой статье на простых и доступных примерах рассмотрим одну из концепций функционального программирования - Функции первого класса.
Это серия статей о функциональном программировании:
Итак, вы спросите себя: «Хорошо, я понимаю взаимосвязь между функциональным программированием и математикой, но как первоклассные функции сделают возможными все эти преимущества?»
Очень хороший вопрос. Так как функциональное программирование полностью зависит от наличия привилегий функций, функции первого класса — это краеугольный камень для всех концепций функционального программирования.
Наличие в языке программирования функций первого класса позволяет иметь удивительные шаблоны, которые рассмотрим далее.
Рассмотрим каждую строчку.
Строка 1:
- Парадигмы программирования
- Композиция
- Функторы
- Каррирование
- Чистые функции
- Функции первого класса (рассматривается в этой статье)
Что такое функция первого класса?
Считается, что язык программирования поддерживает функции первого класса, если он не имеет ограничений на то, как функции могут создаваться или использоваться. Говорят, что язык программирования имеет функции первого класса, когда функции в этом языке рассматриваются как любая другая переменная. В общем, языки программирования накладывают ограничения на способы манипулирования вычислительными элементами. Говорят, что элементы с наименьшими ограничениями имеют статус первого класса. Вот некоторые из "прав и привилегий" первоклассных элементов:- Может быть назначен обычным переменным
- Передаются в качестве аргументов функциям
- Возвращается как результат функций
- Входит в любые структуры данных
Особенности функций первого класса
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
add
— это функция, которая принимает первый параметр x
и возвращает анонимную функцию, которая принимает второй параметр y
и возвращает x + y
.
Строка 3: выполнение add(5)
вернет функцию со значением 5
внутри нее. Компилятор/оптимизатор поймет это именно так:
Строка 4: точно такая же, как и строка 3. Выполнениеconst add5 = (y) => 5 + y
add(10)
вернет функцию со значением 10
внутри нее. Компилятор/Оптимизатор поймет это именно так:
Строка 6 и строка 7: это обычные вызовы функций для ранее «динамически» созданных функцийconst add10 = (y) => 10 + y
add5
и add10
.
После понимания того, что делает каждая строка, разберемся в терминологии для add
, add5
и add10
:
add
— функция высшего порядка. Почему? Потому что она возвращает функцию.- Но
add5
иadd10
являются замыканиями. Почему? Потому что они имеют значения5
и10
соответственно, заключенные (связанные) в лексической области видимости их родителя и все еще доступные им. (Вот почему, когда мы вызываемadd5(1)
, он будет использовать уже переданное5
дляadd
).
3. Каррирование
Это механизм применения концепции ленивых вычислений. Его мы подробно рассматривали в отдельной части.Итоги
Функции первого класса — это не шаблон, это особенность языка программирования. Эта возможность позволяет легко обращаться с функциями как с переменными без ограничений. Наличие этой возможности делает язык более мощным и готовым к функциональному программированию. В таком языке мы можем создавать очень мощные утилиты, такие как функции высшего порядка, замыкания, каррирование и многое другое.Полное руководство по React
2 года назад·3 мин. на чтение
Это руководство поможет плавно войти в Реакт разработку и понять как использовать react.
Мы начнем с самых базовых концепций. Рассмотрим различные варианты добавления ReactJS на сайт и создания React проекта. Создадим первые компоненты и шаг за шагом будем подробно рассматривать все части компонента - JSX, события, стили, хуки и т.д. Данный react туториал на русском разделен на удобные части, каждая из которых включает подробное объяснение и простые примеры. Этот гайд подойдет и для начинающих react разработчиков.
Также весь API собран в удобный справочник, в котором можно найти подробное объяснение конкретных функций React.
Установка
В этом разделе полного руководства по Реакт собраны все варианты установки React. Можно создать проект на React с нуля или постепенно внедрять его в существующее приложение. Также узнаем как настроить базовый набор инструментов на компьютере для разработки и отладки React приложения.- Как начать работать с React
- Как добавить React на сайт
- Настройка редактора IDE для работы с React
- Инструменты разработчика React
- Быстрый старт с React
- Мышление в стиле React
Интерфейс пользователя
В этой части руководства по React мы напишем первый React компонент. React компоненты - это переиспользуемые элементы пользовательского интерфейса. В приложении React каждая часть пользовательского интерфейса является компонентом.- Пишем первый React компонент
- Импорт и экспорт компонентов
- Разметка с JSX
- JavaScript в фигурных скобках в JSX
- Как передать пропсы компоненту
- Рендеринг по условию
- Рендеринг списков
- Чистые компоненты
Добавление интерактивности
Эта часть руководства по React посвящена тому как обрабатывать действия пользователя. Некоторые элементы на экране обновляются в ответ на действия пользователя. Например, клик по галерее изображений переключает активное изображение. В React данные, которые меняются со временем, называются состоянием. Вы можете добавить состояние к любому компоненту и обновить его по мере необходимости. В этой части курса по Реакт вы узнаете, как писать компоненты, которые обрабатывают взаимодействия, обновляют свое состояние и отображают разные выходные данные с течением времени.- Реакция на события
- Состояние - память компонента
- Рендеринг и фиксация
- Состояние как снимок
- Очередь обновлений состояния
- Обновление объектов в состоянии
- Обновление массивов в состоянии
Управление состоянием
Данная часть react js руководства включает подробное объяснение работы с состоянием. По мере роста вашего React приложения полезно более внимательно относиться к тому, как организовано состояние и как данные передаются между вашими компонентами. Избыточное или повторяющееся состояние является распространенным источником ошибок. В этой части вы узнаете, как правильно структурировать состояние, как поддерживать логику обновления состояния и как обмениваться состоянием между компонентами.- Реакция на ввод с состоянием
- Какую структуру состояния выбрать
- Обмен данными между компонентами
- Сохранение и сброс состояния
- Управление состоянием в редьюсере
- Отправка данных вглубь с помощью контекста
- Масштабирование состояния с редьюсером и контекстом
Продвинутые темы
Некоторым из ваших компонентов может потребоваться управление и синхронизация с системами вне React. Например, вам может потребоваться сфокусировать ввод с помощью API браузера, воспроизвести и приостановить видеопроигрыватель, реализованный без React, или подключиться и прослушать сообщения с удаленного сервера. В этой части курса по Реакт вы узнаете о лозейках, позволяющих «выйти за пределы» React и подключиться к внешним системам. Большая часть логики вашего приложения и потока данных не должны полагаться на эти функции.- Доступ к данным через рефы
- Управление DOM с помощью рефов
- Синхронизация с помощью эффектов
- Вам может не понадобиться эффект
- Жизненный цикл реактивных эффектов
- Отделение событий от эффектов
- Удаление лишних зависимостей эффектов
- Переиспользование логики с кастомными хуками