Введение в React: основные понятия и принципы

React - это JavaScript библиотека для создания пользовательских интерфейсов. Она используется множеством компаний для создания мощных и эффективных веб-приложений. В этой статье мы рассмотрим основные понятия и принципы React, чтобы помочь вам начать работу с этой библиотекой.

1. Компоненты

Основной концепцией React являются компоненты. Компоненты - это независимые и переиспользуемые блоки кода, которые объединяют HTML, CSS и JavaScript. Каждый компонент имеет свою собственную логику и состояние, которые позволяют ему отображать данные и взаимодействовать с пользователем.

2. JSX

React использует специальный синтаксис под названием JSX, который позволяет писать HTML-подобный код внутри JavaScript файла. JSX делает код более читаемым и понятным, а также облегчает работу с компонентами.

3. Виртуальный DOM

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

4. Однонаправленный поток данных

В React данные передаются по направлению от родительского компонента к дочернему. Это означает, что изменение данных в одном компоненте не влияет на другие компоненты. Данные передаются через свойства (props) и могут быть изменены только в родительском компоненте.

5. Состояние (state)

Состояние - это объект, который хранит данные, специфичные для компонента. Каждый компонент может иметь свое собственное состояние, которое может быть изменено и отображено на пользовательском интерфейсе. Изменение состояния вызывает перерисовку компонента, чтобы отобразить новые данные.

6. Жизненный цикл компонента

Компоненты в React имеют жизненный цикл, который состоит из различных методов. Эти методы вызываются в определенные моменты времени в процессе создания, обновления и удаления компонента. Некоторые из наиболее используемых методов жизненного цикла классовых компонентов включают componentDidMount, componentDidUpdate и componentWillUnmount.

7. Разделение компонентов

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

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

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) и улучшение производительности приложений.

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

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

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

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

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