Основы React.js: от первого компонента до полноценного приложения

Введение в React, установка Node.js и запуск первого приложения

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

Компонентный подход и декларативность

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

React.js — это JavaScript-библиотека от Meta для удобной разработки интерфейсов, то есть внешней части сайтов и приложений, с которой взаимодействует пользователь. Главная фишка React.js — компоненты и состояния.

skillbox.ru

Декларативный стиль программирования означает, что разработчик описывает, как должен выглядеть интерфейс в определенном состоянии, а React самостоятельно решает, какие шаги нужно предпринять для обновления экрана. Если в корзине интернет-магазина меняется количество товаров с 2 на 3, разработчику не нужно вручную искать элемент счетчика и обновлять его текст. Достаточно обновить данные, и интерфейс перерисуется автоматически.

Виртуальный DOM и производительность

Браузеры используют объектную модель документа (DOM) для представления структуры веб-страницы. Прямое взаимодействие с реальным DOM работает медленно. Чтобы решить эту проблему, React использует Virtual DOM — легковесную копию реального DOM, хранящуюся в оперативной памяти.

Когда данные в приложении меняются, React сначала обновляет Virtual DOM, а затем сравнивает новую версию с предыдущей. Этот процесс называется согласованием.

В классической теории графов алгоритм сравнения двух деревьев имеет временную сложность $O(n^3)$, где $n$ — количество узлов в дереве. React использует эвристический алгоритм, который снижает эту сложность до $O(n)$.

Если на веб-странице отображается 1000 элементов, классический алгоритм потребовал бы $1000^3 = 1 000 000 000$ операций для полного обновления структуры. Благодаря оптимизациям React выполнит всего около 1000 операций. На практике это означает, что интерфейс обновляется за 15-20 миллисекунд, обеспечивая плавную работу без зависаний.

Сравнение с классическим подходом

Чтобы лучше понять преимущества библиотеки, сравним ее с традиционной разработкой на чистом JavaScript.

Характеристика	Чистый JavaScript	React.js
Подход к интерфейсу	Императивный (описываем каждый шаг)	Декларативный (описываем желаемый результат)
Обновление страницы	Прямое изменение DOM, ресурсоемкое	Через Virtual DOM, точечное и быстрое
Архитектура	Часто монолитная, сложно масштабировать	Строго компонентная, легко переиспользовать код
Синтаксис	Разделение HTML и логики JS	Использование JSX (HTML внутри JS)

Синтаксис JSX: объединение логики и разметки

Традиционно веб-разработчики разделяли структуру страницы (HTML) и ее логику (JavaScript) по разным файлам. React ломает эту парадигму, предлагая использовать JSX (JavaScript XML). Это расширение синтаксиса, которое позволяет писать разметку непосредственно внутри JS-кода.

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

Например, если у нас есть переменная с именем пользователя, мы можем легко вывести ее на экран:

function Greeting() {
  const userName = "Алексей";
  const messagesCount = 5;

  return (
    <div>
      <h1>Привет, {userName}!</h1>
      <p>У вас {messagesCount} новых сообщений.</p>
    </div>
  );
}

Фигурные скобки {} в JSX работают как окно в мир JavaScript. Все, что находится внутри них, вычисляется и результат подставляется в итоговую разметку. Если messagesCount изменится на 6, React автоматически обновит только цифру в абзаце, не затрагивая заголовок.

Роль Node.js и пакетного менеджера npm

React — это библиотека для работы в браузере (на стороне клиента, или frontend). Однако для комфортной разработки требуется серверное окружение. Здесь на помощь приходит Node.js — среда выполнения JavaScript вне браузера.

Node.js не используется для работы самого React-приложения у конечного пользователя. Он нужен исключительно на этапе разработки для следующих задач:

• Запуск локального сервера для тестирования приложения.
• Сборка множества файлов в один оптимизированный пакет.
• Преобразование современного синтаксиса (например, JSX) в обычный JavaScript, который понимают старые браузеры.

Вместе с Node.js устанавливается npm (Node Package Manager) — крупнейший в мире каталог библиотек. С помощью npm разработчики скачивают сам React и тысячи других полезных инструментов. Например, если проекту нужен календарь, разработчик не пишет его с нуля, а скачивает готовый пакет через npm.

Подготовка рабочего окружения

Для начала работы необходимо установить базовые инструменты. Процесс состоит из нескольких простых шагов:

1. Перейдите на официальный сайт Node.js.
2. Скачайте установочный файл версии LTS (Long Term Support) — она наиболее стабильна.
3. Запустите скачанный файл и пройдите стандартный процесс установки, соглашаясь с настройками по умолчанию.
4. Откройте терминал (командную строку) на вашем компьютере.
5. Введите команду node -v, чтобы проверить успешность установки. В ответ должна появиться версия программы, например, v20.12.0.
6. Введите команду npm -v, чтобы убедиться в наличии пакетного менеджера.

После успешной установки Node.js ваш компьютер полностью готов к созданию современных веб-приложений.

Создание и запуск первого проекта

Исторически самым популярным способом создания нового проекта была утилита Create React App. Она автоматически настраивает все необходимые инструменты, скрывая сложные конфигурации от разработчика.

Для создания проекта откройте терминал, перейдите в папку, где хотите сохранить проект, и выполните следующую команду:

npx create-react-app my-first-app

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

После завершения установки перейдите в созданную папку:

cd my-first-app

Теперь можно запустить локальный сервер для разработки:

npm start

Эта команда откроет новую вкладку в вашем браузере по адресу http://localhost:3000. Вы увидите вращающийся логотип React — это означает, что приложение успешно запущено и работает.

Структура проекта и первый компонент

Если открыть папку my-first-app в редакторе кода, можно увидеть множество файлов. Главный интерес представляет папка src — именно в ней находится исходный код приложения.

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

function App() {
  return (
    <div>
      <h1>Добро пожаловать в React!</h1>
      <p>Это мое первое приложение.</p>
    </div>
  );
}

export default App;

Любые изменения, внесенные в этот файл и сохраненные, моментально отобразятся в браузере без необходимости вручную обновлять страницу. Эта функция называется горячей перезагрузкой (Hot Reloading) и значительно ускоряет процесс разработки.

Основы JSX, создание компонентов и передача данных через пропсы

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

Анатомия JSX: больше, чем просто разметка

Аббревиатура JSX расшифровывается как JavaScript XML. Это синтаксическое расширение, которое позволяет писать код, визуально похожий на HTML, непосредственно внутри файлов JavaScript.

Браузеры не понимают JSX напрямую. Перед тем как код попадет к пользователю, специальные инструменты (например, Babel) преобразуют его в обычные вызовы функций. По сути, JSX — это синтаксический сахар для встроенного метода React.createElement.

Рассмотрим наглядный пример того, как один и тот же элемент создается с использованием JSX и без него:

// Использование JSX
const element = <h1 className="greeting">Привет, мир!</h1>;

// То же самое на чистом React без JSX
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Привет, мир!'
);

Писать сложные интерфейсы через вложенные вызовы createElement крайне неудобно, поэтому JSX стал стандартом де-факто в экосистеме библиотеки.

Строгие правила синтаксиса

Несмотря на внешнее сходство с HTML, JSX имеет несколько строгих правил, нарушение которых приведет к ошибке компиляции:

1. Возврат одного корневого элемента. Функция не может вернуть два соседних тега без общего родителя. Если нужно вернуть несколько элементов, их оборачивают в общий <div> или специальный пустой тег <> (фрагмент).
2. Закрытие всех тегов. В отличие от обычного веба, где тег <img> или <input> может оставаться открытым, в JSX каждый тег обязан закрываться: <img src="logo.png" />.
3. Использование camelCase для атрибутов. Поскольку JSX — это JavaScript, зарезервированные слова использовать нельзя. Вместо class пишется className, а вместо onclick — onClick.

Функциональные компоненты: строительные блоки интерфейса

Пользовательские интерфейсы можно разбить на небольшие, независимые и повторно используемые фрагменты. В терминологии библиотеки они называются компонентами.

Современный стандарт разработки подразумевает использование функциональных компонентов. Это обычные функции JavaScript, которые возвращают JSX-разметку.

Props для компонентов — то же, что и аргументы для функций

Медиа Нетологии

Главное правило при создании компонента — его имя всегда должно начинаться с заглавной буквы. Это позволяет библиотеке отличать пользовательские компоненты от стандартных тегов (таких как <div> или <span>).

function ProductCard() {
  return (
    <div className="card">
      <h2>Ноутбук</h2>
      <p>Цена: 50 000 руб.</p>
      <button>Купить</button>
    </div>
  );
}

Создав такой компонент один раз, его можно использовать в любом месте приложения неограниченное количество раз, просто написав <ProductCard />.

Передача данных: механика пропсов

Если бы компоненты всегда отображали статичный текст, их польза была бы минимальной. В реальных приложениях карточки товаров должны отображать разные названия и цены. Для передачи данных от родительского компонента к дочернему используются пропсы (от английского properties — свойства).

Пропсы передаются в компонент точно так же, как атрибуты в обычные теги. Внутри компонента они доступны в виде объекта, который передается в функцию в качестве первого аргумента.

function ProductCard(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <p>Цена: {props.price} руб.</p>
      <button>Купить</button>
    </div>
  );
}

// Использование компонента в главном файле
function App() {
  return (
    <div>
      <ProductCard title="Ноутбук" price={50000} />
      <ProductCard title="Смартфон" price={30000} />
    </div>
  );
}

Обратите внимание на фигурные скобки {}. В JSX они используются для вставки любых выражений JavaScript. Число 50000 передается в фигурных скобках, чтобы оно интерпретировалось как числовой тип данных, а не как строка.

Вычисления внутри компонентов

Поскольку внутри компонента доступна вся мощь языка программирования, мы можем производить математические вычисления прямо перед возвратом разметки.

Представим, что нам нужно рассчитать итоговую стоимость товара с учетом скидки. Для этого можно использовать следующую формулу:

$$P_{final} = P_{base} \times (1 - d)$$

Где $P_{final}$ — итоговая цена, $P_{base}$ — базовая цена товара (переданная через пропсы), а $d$ — размер скидки в виде десятичной дроби.

Если базовая цена составляет 50 000 руб., а скидка равна 0.2 (то есть 20%), то итоговая цена составит 40 000 руб. В коде это будет выглядеть так:

function DiscountedProduct(props) {
  const finalPrice = props.price * (1 - props.discount);

  return (
    <div>
      <h2>{props.title}</h2>
      <p>Старая цена: {props.price} руб.</p>
      <p>Новая цена: {finalPrice} руб.</p>
    </div>
  );
}

Сравнение HTML-атрибутов и пропсов

Чтобы окончательно закрепить разницу между привычной версткой и компонентным подходом, сопоставим их ключевые характеристики.

Характеристика	HTML-атрибуты	React-пропсы
Тип данных	Только строки	Любые типы (числа, массивы, объекты, функции)
Изменяемость	Можно изменять через скрипты	Строго доступны только для чтения (read-only)
Именование	Любой регистр (обычно нижний)	Строго camelCase
Назначение	Настройка стандартных элементов браузера	Передача данных между пользовательскими блоками

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

Интерактивность: управление состоянием (State) и обработка событий

Ранее мы выяснили, что компоненты могут получать данные извне через пропсы. Однако важнейшее архитектурное правило гласит: пропсы строго доступны только для чтения. Если пользователь нажимает на кнопку «Добавить в корзину», компонент не имеет права изменить переданный ему пропс с количеством товаров. Для создания живых, интерактивных интерфейсов, которые реагируют на действия пользователя и меняются со временем, применяется другой механизм — состояние (state).

Декларативный подход к интерфейсу

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

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

Библиотека React использует декларативный подход. Разработчик описывает различные визуальные состояния, в которых может находиться компонент, и переключается между ними при изменении данных.

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

Habr

Вместо того чтобы напрямую манипулировать элементами, мы просто объявляем: «если данные загружаются, покажи индикатор загрузки; если данные получены, покажи список». Библиотека сама берет на себя задачу по обновлению экрана.

Обработка пользовательских событий

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

Во-первых, события именуются в стиле camelCase. Вместо привычного onclick используется onClick, а вместо onchange — onChange.

Во-вторых, в качестве обработчика передается не строка с кодом, а сама функция.

function OrderButton() {
  function handleClick() {
    alert('Заказ оформлен!');
  }

  return (
    <button onClick={handleClick}>
      Оформить заказ
    </button>
  );
}

Обратите внимание: мы передаем handleClick без круглых скобок на конце. Если написать onClick={handleClick()}, функция выполнится мгновенно при отрисовке компонента, а не в момент клика.

Хук useState: память компонента

Для добавления внутреннего состояния в функциональные компоненты используются хуки (hooks) — специальные встроенные функции библиотеки. Самым часто используемым является хук useState.

При вызове useState мы сообщаем компоненту, что ему нужно «запомнить» определенное значение. Эта функция принимает один аргумент — начальное значение состояния, а возвращает массив из двух элементов:

1. Текущее значение состояния.
2. Функцию-сеттер для обновления этого значения.

Для удобства извлечения этих элементов применяется синтаксис деструктуризации массивов из современного JavaScript.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={handleIncrement}>Увеличить</button>
    </div>
  );
}

В этом примере начальное значение счетчика равно нулю. При каждом клике на кнопку вызывается функция handleIncrement, которая передает новое значение в setCount.

Механика ререндеринга

Вызов функции-сеттера делает больше, чем просто перезаписывает переменную. Он сообщает библиотеке, что данные компонента изменились и его необходимо отрисовать заново. Этот процесс называется ререндеринг (re-render).

Когда вызывается setCount(1), происходит следующее:

1. Библиотека ставит обновление состояния в очередь.
2. Компонент Counter вызывается повторно.
3. При новом вызове useState(0) библиотека игнорирует начальное значение 0 и возвращает актуальное состояние 1.
4. Генерируется новая разметка с числом 1.
5. Библиотека сравнивает новую разметку со старой и точечно обновляет только изменившуюся цифру в браузере.

Если на странице отображается товар стоимостью 500 руб., и пользователь добавляет в корзину 3 таких товара, общая стоимость вычисляется по классической формуле:

$$S = p \times q$$

Где $S$ — итоговая сумма, $p$ — базовая цена одного товара (константа или пропс), а $q$ — количество единиц товара, которое хранится в состоянии и меняется при кликах. При изменении $q$ с 1 на 3, компонент перерисовывается, и на экране мгновенно отображается новая сумма — 1500 руб.

Обновление состояния на основе предыдущего

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

function handleDoubleIncrement() {
  setCount(count + 1);
  setCount(count + 1);
}

Если начальное значение count равно 0, после выполнения этой функции счетчик станет равен 1, а не 2. Это происходит потому, что переменная count фиксируется на момент начала рендера. Оба вызова setCount видят count как 0 и оба устанавливают значение 1.

Для решения этой проблемы в функцию-сеттер можно передать не готовое значение, а функцию обратного вызова (callback). Эта функция гарантированно получит самое актуальное состояние на момент обновления.

function handleDoubleIncrement() {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
}

Теперь первый вызов увеличит 0 до 1, а второй вызов получит 1 в качестве prevCount и увеличит его до 2.

Сравнение состояния и пропсов

Чтобы избежать путаницы при проектировании архитектуры приложения, важно четко разграничивать зоны ответственности пропсов и состояния.

Характеристика	Пропсы (Props)	Состояние (State)
Происхождение	Передаются от родительского компонента	Инициализируется внутри самого компонента
Изменяемость	Строго только для чтения	Изменяется с помощью функции-сеттера
Назначение	Настройка компонента извне (как аргументы функции)	Управление внутренними динамическими данными
Влияние на рендер	Изменение пропсов родителем вызывает ререндер дочернего	Изменение состояния вызывает ререндер самого компонента

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

Работа с жизненным циклом, хуки (Hooks) и взаимодействие с внешними API

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

Этапы существования компонента

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

Жизненный цикл делится на три основные фазы:

1. Монтирование (mounting) — первичное создание компонента и его вставка в дерево документа.
2. Обновление (updating) — перерисовка компонента при изменении его пропсов или внутреннего состояния.
3. Размонтирование (unmounting) — удаление компонента с экрана и очистка ресурсов.

Жизненный цикл позволяет компоненту реагировать на изменения внешних данных, обновлять свое состояние и взаимодействовать с DOM.

Code Lab

Исторически для управления этими фазами использовались классовые компоненты со специальными методами. С появлением современной архитектуры их заменили хуки (hooks) — специальные функции, позволяющие использовать возможности библиотеки в функциональных компонентах.

Фаза жизненного цикла	Устаревший классовый метод	Современный подход (Хуки)	Назначение
Монтирование	componentDidMount	useEffect с пустым массивом зависимостей	Загрузка начальных данных, запуск таймеров
Обновление	componentDidUpdate	useEffect с указанными зависимостями	Реакция на изменение конкретных переменных
Размонтирование	componentWillUnmount	Функция очистки внутри useEffect	Отмена подписок, очистка памяти

Управление побочными эффектами

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

Однако реальные приложения требуют выполнения побочных эффектов (side effects): отправки сетевых запросов, изменения заголовка вкладки браузера или записи данных в локальное хранилище. Для изоляции таких операций от процесса отрисовки интерфейса используется хук useEffect.

import { useState, useEffect } from 'react';

function DocumentTitleUpdater() {
  const [clicks, setClicks] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${clicks} раз`;
  });

  return (
    <button onClick={() => setClicks(clicks + 1)}>
      Кликни меня
    </button>
  );
}

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

Взаимодействие с внешними API и обработка ошибок

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

Чтобы запрос выполнился только один раз при монтировании компонента, хук useEffect принимает второй аргумент — массив зависимостей. Кроме того, при работе с сетью необходимо учитывать возможные сбои и управлять состоянием загрузки.

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    setError(null);

    fetch(`https://api.example.com/users/${userId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Ошибка сети');
        }
        return response.json();
      })
      .then(data => {
        setUser(data);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setIsLoading(false);
      });
  }, [userId]);

  if (isLoading) return <p>Загрузка профиля...</p>;
  if (error) return <p>Произошла ошибка: {error}</p>;

  return <div>Привет, {user.name}!</div>;
}

Массив зависимостей [userId] — это механизм контроля. Библиотека сравнивает текущее значение userId с тем, которое было при предыдущем рендере. Если значения совпадают, эффект пропускается. Если значение изменилось (например, пользователь выбрал другой профиль), эффект запускается заново, загружая новые данные.

При работе с большими массивами данных, полученными от API, часто применяется пагинация (постраничный вывод). Для расчета общего количества страниц используется математическая формула:

$$P = \lceil \frac{N}{L} \rceil$$

Где $P$ — общее количество страниц, $N$ — общее количество элементов на сервере, $L$ — лимит элементов на одну страницу, а оператор $\lceil \dots \rceil$ означает округление дроби в большую сторону. Если сервер сообщает, что всего найдено 53 пользователя ($N = 53$), а мы отображаем по 10 на странице ($L = 10$), то $53 / 10 = 5.3$. Округление вверх дает 6 страниц.

Очистка ресурсов и предотвращение утечек памяти

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

Для решения этой проблемы функция внутри useEffect может возвращать другую функцию — функцию очистки (cleanup function). Библиотека автоматически вызовет ее перед тем, как компонент будет размонтирован, а также перед каждым повторным выполнением эффекта.

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return <p>Прошло секунд: {seconds}</p>;
}

Если пользователь открывает виджет таймера, создается интервал. Когда через 45 секунд пользователь закрывает виджет, компонент размонтируется. В этот момент срабатывает функция очистки, которая останавливает интервал, освобождая ресурсы браузера.

Проблема устаревших замыканий

При работе с хуками разработчики часто сталкиваются с проблемой устаревших замыканий (stale closures). Это происходит, когда функция внутри useEffect использует переменную из состояния или пропсов, но эта переменная не указана в массиве зависимостей.

Если в предыдущем примере с таймером написать setSeconds(seconds + 1) вместо setSeconds(prev => prev + 1) и оставить пустой массив зависимостей [], таймер застрянет на цифре 1.

Причина кроется в механике работы языка JavaScript. Функция внутри эффекта «запоминает» переменные на момент своего создания. При первом рендере seconds равно 0. Интервал каждую секунду будет выполнять 0 + 1, постоянно устанавливая состояние в 1. Использование функции обратного вызова в сеттере (prev => prev + 1) гарантирует, что мы всегда работаем с самым актуальным состоянием, независимо от замыканий.

Создание пользовательских хуков

По мере роста приложения логика работы с состоянием и побочными эффектами начинает дублироваться. Библиотека позволяет разработчикам создавать собственные, пользовательские хуки (custom hooks), инкапсулируя сложную логику в переиспользуемые функции.

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

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error('Ошибка загрузки');
        return res.json();
      })
      .then(result => {
        setData(result);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

Теперь любой компонент в приложении может использовать useFetch для загрузки данных, сокращая количество шаблонного кода. Разделение логики и визуального представления делает код более читаемым и упрощает его тестирование. Если нам понадобится загрузить список постов, мы просто напишем const { data, loading } = useFetch('/api/posts'), не дублируя логику обработки ошибок и состояний загрузки.

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

Архитектура одностраничных приложений и маршрутизация

Исторически веб-сайты работали по принципу многостраничных приложений. При каждом клике на ссылку браузер отправлял запрос на сервер и полностью перезагружал страницу. Это занимало время и создавало визуальное «мерцание». Современный подход базируется на архитектуре одностраничных приложений (Single Page Application, SPA).

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

Nuances of Programming

Для реализации такого механизма в экосистеме React используется библиотека React Router. Она перехватывает изменение URL-адреса в строке браузера и решает, какой именно компонент нужно показать пользователю в данный момент.

Основные элементы маршрутизации:

• BrowserRouter — обертка для всего приложения, которая включает механизм отслеживания истории браузера.
• Routes — контейнер, группирующий все доступные пути.
• Route — конкретный маршрут, связывающий URL-адрес и React-компонент.
• Link — замена стандартного тега ссылок, позволяющая переходить по страницам без перезагрузки.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/about">О нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

В этом примере при клике на ссылку «О нас» адресная строка изменится на /about, а React Router мгновенно демонтирует компонент Home и смонтирует About.

Часто маршруты должны быть динамическими. Например, страница конкретного товара в магазине не имеет фиксированного адреса, ее URL зависит от идентификатора товара. Для этого в React Router используются параметры пути.

import { Routes, Route, useParams } from 'react-router-dom';

function ProductDetails() {
  const { id } = useParams();
  return <h1>Информация о товаре с ID: {id}</h1>;
}

function App() {
  return (
    <Routes>
      <Route path="/product/:id" element={<ProductDetails />} />
    </Routes>
  );
}

Синтаксис :id указывает маршрутизатору, что эта часть URL является переменной. Хук useParams позволяет извлечь это значение внутри компонента и использовать его, например, для отправки запроса к API за данными конкретного товара.

Глобальное управление состоянием с Redux

По мере роста количества страниц и компонентов возникает проблема передачи данных. Если состояние создано в корневом компоненте, а нужно оно глубоко вложенному дочернему элементу, разработчику приходится передавать пропсы через все промежуточные уровни. Этот антипаттерн называется проп-дриллинг (prop drilling).

Для решения этой проблемы используются менеджеры глобального состояния, самым популярным из которых является Redux. Он создает единое централизованное хранилище (store), к которому может обратиться любой компонент напрямую, минуя промежуточные уровни.

Характеристика	Локальное состояние (useState)	Глобальное состояние (Redux)
Область видимости	Доступно только внутри компонента и его детей	Доступно любому компоненту в приложении
Жизненный цикл	Уничтожается при размонтировании компонента	Сохраняется на протяжении всей работы приложения
Применение	Состояние открытого меню, текст в поле ввода	Данные профиля пользователя, корзина товаров, тема оформления

Современный стандарт работы с этой библиотекой — Redux Toolkit (RTK). Он избавляет от написания шаблонного кода и упрощает настройку. Логика разделяется на «слайсы» (slices) — независимые модули, отвечающие за конкретную часть данных.

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    }
  }
});

export const { increment } = counterSlice.actions;

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

Чтобы связать React-компоненты с хранилищем Redux, используются два специальных хука: useSelector и useDispatch. Первый позволяет подписаться на определенную часть глобального состояния. Компонент будет автоматически перерисовываться только тогда, когда изменятся данные, на которые он подписан. Второй хук предоставляет функцию для отправки действий (actions), которые запускают логику изменения состояния в редьюсерах.

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Текущий счет: {count}</p>
      <button onClick={() => dispatch(increment())}>
        Прибавить
      </button>
    </div>
  );
}

Такой подход строго разделяет визуальное представление и бизнес-логику. Компонент Counter ничего не знает о том, как именно происходит увеличение счетчика. Он лишь отображает текущее значение и отправляет сигнал о намерении пользователя.

Оптимизация производительности

Сложные приложения с глобальным состоянием и множеством маршрутов подвержены проблемам с производительностью. Важно понимать, что процесс перерисовки (re-render) в React не означает немедленного изменения реального DOM-дерева браузера. Сначала библиотека создает новое виртуальное дерево (Virtual DOM), сравнивает его с предыдущей версией и вычисляет минимальный набор необходимых изменений. Этот процесс называется согласованием (reconciliation).

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

Для оценки затрат на отрисовку интерфейса можно использовать базовую математическую модель:

$$T = N \\times t$$

Где $T$ — общее время перерисовки интерфейса, $N$ — количество компонентов, затронутых обновлением, а $t$ — среднее время выполнения функции одного компонента. Если в списке 1000 элементов ($N = 1000$), и каждый рендерится 2 миллисекунды ($t = 2$), то одно нажатие кнопки вызовет задержку в 2000 миллисекунд (2 секунды), что сделает интерфейс невосприимчивым.

Чтобы уменьшить $N$, применяется мемоизация — кэширование результатов вычислений. Инструмент React.memo оборачивает компонент и заставляет React сравнивать новые пропсы со старыми. Если они идентичны, перерисовка этого компонента пропускается.

Для кэширования сложных вычислений внутри самого компонента используется хук useMemo.

import { useState, useMemo } from 'react';

function ExpensiveComponent({ numbers }) {
  const [multiplier, setMultiplier] = useState(1);

  const sortedAndFiltered = useMemo(() => {
    console.log('Выполняется сложная сортировка...');
    return numbers.filter(n => n > 10).sort((a, b) => a - b);
  }, [numbers]);

  return (
    <div>
      <button onClick={() => setMultiplier(multiplier + 1)}>
        Увеличить множитель: {multiplier}
      </button>
      <ul>
        {sortedAndFiltered.map(num => (
          <li key={num}>{num * multiplier}</li>
        ))}
      </ul>
    </div>
  );
}

В данном примере фильтрация и сортировка массива numbers — ресурсоемкая операция. Благодаря useMemo, она выполнится только при изменении самого массива numbers. Если пользователь просто нажимает кнопку и меняет multiplier, React возьмет готовый отсортированный массив из памяти, экономя вычислительные ресурсы.

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

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