Чистые функции. Функциональное программирование
2 года назад·3 мин. на чтение
В этой статье на простых и доступных примерах рассмотрим одну из концепций функционального программирования - Чистые функции.
Это серия статей о функциональном программировании:
- Парадигмы программирования
- Композиция
- Функторы
- Каррирование
- Чистые функции (рассматривается в этой статье)
- Функции первого класса
Что такое чистая функция?
Чистая функция — это функция, которая является детерминированной и не производит побочных эффектов.Характеристики чистой функции
️1. Чистые функции должны быть детерминированными
Детерминированная функция — это функция, которая при одном и том же входеx
всегда должна иметь один и тот же результат y
.
Примеры недетерминированных функций
Math.random
const getRandom = () => Math.random()
- Функции
Date
const getDate = () => Date.now()
getUsers
Функцияconst getUsers = await fetch('/users')
getUsers
недетерминирована, потому что пользователи могли обновиться, нет подключения к интернету, сервер может быть недоступен или что-то еще.
Комментарии к примерам
Эти примеры считаются недетерминированными, потому что для одних и тех же входных данных выходные данные будут отличаться. Детерминизм означает, что функция никогда не изменит результат при одних и тех же входных данных.️2. Чистые функции не должна иметь побочных эффектов
Побочным эффектом может быть:- Внешняя зависимость (доступ к внешним переменным, потокам ввода/вывода, чтение/запись файлов или выполнение HTTP-вызовов).
- Мутация (мутации локальных/внешних переменных или переданных аргументов по ссылке).
Примеры побочных эффектов
- Функция
isLessThanMin
Чистая функцияconst min = 60 const isLessThanMin = value => value < min
Побочный эффект заключается во внешней зависимости. Для исправления используется внедрение зависимости (dependency injection).const isLessThanMin = (min, value) => value > min
- Функция для вычисления квадратов чисел
Чистая функцияconst squares = (nums) => { for(let i = 0; i < nums.length; i++) { nums[i] **= 2; } }
Побочный эффект заключается в наличии императивного кода, который выполняет мутации в исходном массиве по ссылке. Для исправления используется функциональныйconst squares = (nums) => nums.map(num => num * num)
.map
, который создает новый массив.
- Функция
updateUserAge
Чистая функцияconst updateUserAge = (user, age) => { user.age = age }
Побочный эффект заключается в мутации объектаconst updateUserAge = (user, age) => ({ ...user, age })
user
по ссылке. Нужно избегать изменения объектов по ссылке, вместо этого следует вернуть новый объект с новыми/обновленными свойствами.
- Функция
getFirst2Elements
Чистая функцияconst getFirst2Elements = (arr) => arr.splice(0, 2)
Побочный эффект заключается в мутированииconst getFirst2Elements = (arr) => arr.slice(0, 2)
arr
, переданного по ссылке методом .splice
. Для исправления используется функциональный метод .slice
, который не изменяет сам массив.
Почему функции с побочными эффектами - плохо?
У функций с побочными эффектами есть несколько очевидных недостатков:- Это делает функции тесно связанными с окружающей средой
- Увеличивает когнитивную нагрузку на разработчика
- Вызывает неочевидные изменения состояния
- Увеличивает кривую обучения кодовой базы разработчика
- Невозможность параллелизации
- Высокая непредсказуемость
- + потеря преимуществ чистых функций
Почему чистые функции - хорошо?
Можно вывести две основные категории улучшений. Улучшение опыта разработки (developer experience) и улучшение производительности приложений.Улучшение опыта разработки
Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.- Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
- Поддерживаемость: улучшается понимание кода.
- Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
- Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.
Улучшение производительности
- Способность к кэшированию (мемоизация): детерминизм функций даст нам возможность предсказывать, каким будет вывод для определенного ввода, затем мы можем кэшировать функции на основе вводов.
- Возможность распараллеливания: поскольку функции теперь свободны от побочных эффектов и независимы, их можно легко распараллелить.
Как передавать данные между компонентами в ReactJS
2 года назад·3 мин. на чтение
В React можно разными способами передавать данные между компонентами. Применимость каждого способа определяется направлением движения данных. Данные могут двигаться от дочернего компонента к родительскому или наоборот. Данные могут двигаться глубоко - от корневого элемента до элемента-потомка. Данными могут обмениваться соседние элементы. В этой статье мы рассмотрим как передавать данные в каждом конкретном случае.
Есть несколько типичных ситуаций передачи данные между компонентами в React:
- от родительского компонента к дочернему;
- от дочернего компонента к родительскому;
- между соседними компонентами;
- от компонента к компоненту-потомку (через несколько уровней вниз);
- от компонента к компоненту-предку (через несколько уровней вверх).
- через пропсы;
- используя callback-функцию;
- пробросом пропсов от уровня к уровню (prop drilling);
- при помощи контекста (React Context AP);
- через хранилище (store);
От родительского компонента к дочернему
Наиболее простой и часто встречающийся случай - это случай, когда дочерний компонент принимает данные от родителя через пропсы.import { useState } from 'react' const Parent = () => { const [value, setValue] = useState('') const handleChange = (event) => { setValue(event.target.value) } return ( <div> <input type="text" onChange={handleChange } /> {/* передаем проп в дочерний компонент */} <Child value={value} /> </div> ) } const Child = ({ value }) => { return ( <span>Value is: {value || '<Not set>'}</span> ) }
От дочернего компонента к родительскому
Если необходимо передать данные от дочернего реакт компонента к родительскому, используются функции обратного вызова (callback-функции).import { useState } from 'react' const Child = ({ onChange }) => { const handleChange = (event) => { onChange(event.target.value) // callback-функция } return ( <input type="text" onChange={handleChange} /> ) } const Parent = () => { const [value, setValue] = useState('') const handleChange = (value) => { setValue(value) } return ( <div> <span>Value is: {value || '<Not set>'}</span> <Child onChange={handleChange} /> </div> ) }
Между соседними компонентами
Данные между соседними компонентами, т.е. между компонентами на одном уровне, можно передать через общий предок. Обычно данные от одного Реакт компонента передаются вверх, в компонент-предок, через callback-функцию, а компонент-предок передает их в другой компонент через проп.import { useState } from 'react' const Parent = () => { const [value, setValue] = useState('') const handleChange = (value) => { setValue(value) } return ( <div> <Sibling1 onChange={handleChange} /> <Sibling2 value={value} /> </div> ) } const Sibling1 = ({ onChange }) => { const handleChange = (event) => { onChange(event.target.value) } return ( <input type="text" onChange={handleChange} /> ) } const Sibling2 = ({ value}) => { return ( <span>Value is: {value || '<Not set>'}</span> ) }
Через несколько уровней вверх/вниз
Если компоненты находится в несколько уровнях друг от друга, то также можно передать проп. Этот проп придется описывать во всех компонентах на всех промежуточных уровнях. Эта ситуация называется prop drilling. Если уровней много, то такой способ покажется не очень удобным. Если нужно передавать данные на несколько уровней вверх, то также придется описывать и вызывать callback-функцию на всех промежуточных уровнях. Однако, в подобных случаях можно использовать Context API (пример которого приведен ниже), или state management библиотеки, такие как Redux, MobX, Recoil и т.д.Исходный код Подробное руководство по Reactimport { useState, useContext, createContext } from 'react' // создаем контекст const ValueContext = createContext() // Component1 записывает данные в контекст ValueContext const Component1 = () => { const { setValue } = useContext(ValueContext) const handleChange = (event) => { setValue(event.target.value) } return ( <input type="text" onChange={handleChange} /> ) } // Component2 читает данные из контекста ValueContext const Component2 = () => { const { value } = useContext(ValueContext) return ( <span>Value is: {value || '<Not set>'}</span> ) } // компоненты, которым необходим доступ к контексту, // должны быть обернуты в Provider export default function App() { const [value, setValue] = useState('') return ( <ValueContext.Provider value={{ value, setValue }}> <Component1 /> <Component2 /> </ValueContext.Provider> ) }