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

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

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

Что такое чистая функция?

Чистая функция — это функция, которая является детерминированной и не производит побочных эффектов.

Характеристики чистой функции

️1. Чистые функции должны быть детерминированными

Детерминированная функция — это функция, которая при одном и том же входе x всегда должна иметь один и тот же результат y.

Примеры недетерминированных функций

1. Math.random

const getRandom = () => Math.random()

2. ФункцииDate

const getDate = () => Date.now()

3. getUsers

const getUsers = await fetch('/users')

Функция getUsers недетерминирована, потому что пользователи могли обновиться, нет подключения к интернету, сервер может быть недоступен или что-то еще.

Комментарии к примерам

Эти примеры считаются недетерминированными, потому что для одних и тех же входных данных выходные данные будут отличаться. Детерминизм означает, что функция никогда не изменит результат при одних и тех же входных данных.

️2. Чистые функции не должна иметь побочных эффектов

Побочным эффектом может быть:

• Внешняя зависимость (доступ к внешним переменным, потокам ввода/вывода, чтение/запись файлов или выполнение HTTP-вызовов).
• Мутация (мутации локальных/внешних переменных или переданных аргументов по ссылке).

Чистые функции должны быть детерминированными и не должны давать никаких побочных эффектов. При этом невозможно иметь приложения с состоянием без побочных эффектов (запрос к базе данных, выполнение http-вызова, чтение пользовательского ввода или даже отображение результатов в пользовательском интерфейсе). Но в функциональном программировании есть еще несколько концепций/исправлений для этого.

Примеры побочных эффектов

1. Функция isLessThanMin

Функция с побочным эффектом

const min = 60
const isLessThanMin = value => value < min

Чистая функция

const isLessThanMin = (min, value) => value > min

Побочный эффект заключается во внешней зависимости. Для исправления используется внедрение зависимости (dependency injection).

2. Функция для вычисления квадратов чисел

Функция с побочным эффектом

const squares = (nums) => {
  for(let i = 0; i < nums.length; i++) {
    nums[i] **= 2;
  }
}

Чистая функция

const squares = (nums) => nums.map(num => num * num)

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

3. Функция updateUserAge

Функция с побочным эффектом

const updateUserAge = (user, age) => {
  user.age = age
}

Чистая функция

const updateUserAge = (user, age) => ({ ...user, age })

Побочный эффект заключается в мутации объекта user по ссылке. Нужно избегать изменения объектов по ссылке, вместо этого следует вернуть новый объект с новыми/обновленными свойствами.

4. Функция getFirst2Elements

Функция с побочным эффектом

const getFirst2Elements = (arr) => arr.splice(0, 2)

Чистая функция

const getFirst2Elements = (arr) => arr.slice(0, 2)

Побочный эффект заключается в мутировании arr, переданного по ссылке методом .splice. Для исправления используется функциональный метод .slice, который не изменяет сам массив.

Почему функции с побочными эффектами - плохо?

У функций с побочными эффектами есть несколько очевидных недостатков:

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

Почему чистые функции - хорошо?

Можно вывести две основные категории улучшений. Улучшение опыта разработки (developer experience) и улучшение производительности приложений.

Улучшение опыта разработки

Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.

• Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
• Поддерживаемость: улучшается понимание кода.
• Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
• Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.

Улучшение производительности

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

Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router (рассматривается в этой статье)
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах

Основы React Router

Прежде чем мы начнем углубляться в расширенные функции React Router, сначала поговорим об основах React Router. Чтобы использовать React Router, вам необходимо запустить npm i react-router-dom для установки React Router. Эта библиотека устанавливает DOM версию React Router. Если вы используете React Native, вам нужно будет установить react-router-native. За исключением этого небольшого отличия, библиотеки работают почти одинаково. В этой статье сосредоточимся на react-router-dom, но, как уже упоминалось, обе библиотеки почти идентичны. Чтобы использовать React Router, вам нужно сделать три вещи.

1. Настроить роутер
2. Прописать свои маршруты
3. Управлять навигацией

Настройка роутера

Настройка роутера является самым простым шагом. Все, что вам нужно сделать, это импортировать конкретный роутер, который вам нужен (BrowserRouter для веба и NativeRouter для мобильных устройств) и обернуть все ваше приложение в этот роутер.

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

Как правило, вы импортируете свой маршрутизатор в файле index.js вашего приложения, и он будет оборачивать компонент App. Роутер работает так же, как контекст в React, и предоставляет всю необходимую информацию вашему приложению, чтобы вы могли выполнять маршрутизацию и использовать все пользовательские хуки из React Router.

Определение маршрутов

Следующим шагом в React Router является определение ваших маршрутов. Обычно это делается на верхнем уровне приложения, например в компоненте App, но это можно сделать в любом месте.

import { Route, Routes } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  )
}

Определить маршруты так же просто, как определить компонент Route для каждого маршрута в приложении, а затем поместить все эти компоненты Route в один компонент Routes. Всякий раз, когда ваш URL-адрес изменяется, React Router будет просматривать маршруты, определенные в вашем компоненте Routes, и он будет отображать содержимое в пропсе element роута Route, который имеет path, соответствующий URL-адресу. В приведенном выше примере, если бы наш URL-адрес был /books, то отображался бы компонент BookList. Преимущество React Router заключается в том, что при переходе между страницами он обновляет только содержимое внутри вашего компонента Routes. Весь остальной контент на вашей странице останется прежним, что повысит производительность и удобство использования.

Управление навигацией

Последним шагом к React Router является обработка навигации. Обычно в приложении вы перемещаетесь с помощью тегов <a>, но React Router использует свой собственный кастомный компонент Link для обработки навигации. Link представляет собой просто оболочку вокруг тега <a>, которая помогает обеспечить правильную обработку всей маршрутизации и условного повторного рендеринга, чтобы вы могли использовать его так же, как обычный тег <a>.

import { Route, Routes, Link } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/books">Books</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  )
}

В нашем примере мы добавили две ссылки на главную страницу и страницу книг. Вы также заметите, что мы использовали проп to для установки URL-адреса вместо пропса href, который вы привыкли использовать с тегом <a>. Это единственное различие между компонентом Link и тегом <a>, и это то, что вам нужно помнить, так как легко ошибочно случайно использовать проп href вместо to. Еще одна вещь, которую следует отметить в нашем новом коде, заключается в том, что <nav>, который мы создаем в верхней части нашей страницы, находится за пределами нашего компонента Routes, что означает, что при смене страниц этот раздел навигации не будет повторно рендериться, так при изменении URL-адреса изменится только содержимое компонента Routes.