Введение в React

React — это библиотека JavaScript, разработанная Facebook (теперь Meta) и выпущенная с открытым исходным кодом в 2013 году, специально для создания пользовательских интерфейсов, особенно одностраничных приложений (SPA).

React позволяет разработчикам создавать переиспользуемые UI-компоненты декларативным способом.

Позиционирование React

• Не фреймворк, а библиотека: React ориентирован на слой представления (V в MVC), в отличие от Angular, который предоставляет полноценное фреймворк-решение
• Компонентное мышление: Разбиение UI на независимые, переиспользуемые компоненты
• Ориентация на JavaScript: Всё является JavaScript, включая структуру, стиль и логику

Ключевые особенности React

1. Декларативное программирование

Традиционное императивное программирование: Указание компьютеру, как это сделать

// 原生 JavaScript（命令式）
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  const counter = document.getElementById('counter');
  const currentValue = parseInt(counter.textContent);
  counter.textContent = currentValue + 1;
});

Декларативное программирование в React: Указание компьютеру, какой результат вы хотите

// React（声明式）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Преимущества：

• Код становится более кратким и интуитивно понятным
• Проще понимать и поддерживать
• Снижает количество ошибок, связанных с ручным манипулированием DOM
• Состояние и UI остаются синхронизированными

2. Компонентный подход

В основе React лежит компонентное мышление: разбиение UI на независимые, переиспользуемые и компонуемые компоненты, подобно строительным блокам. Каждый компонент заботится только о своём состоянии и props, что делает логику понятной и лёгкой в поддержке.

Приложения React состоят из независимых компонентов, каждый из которых:

• Инкапсулирует собственную структуру, стиль и логику
• Может получать входные данные (props)
• Может хранить внутреннее состояние
• Может быть переиспользован и скомпонован

Преимущества компонентной архитектуры：

• Повторное использование: один и тот же компонент можно использовать в нескольких местах
• Сопровождаемость: изменение компонента не влияет на другие части
• Тестируемость: независимые компоненты легко поддаются модульному тестированию
• Совместная работа: члены команды могут разрабатывать разные компоненты параллельно

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

Что такое виртуальный DOM?

Виртуальный DOM — это представление реального DOM в виде объекта JavaScript, легковесная структура данных в памяти.

Как это работает:

1. 状态改变
   ↓
2. 生成新的虚拟 DOM 树
   ↓
3. 与旧虚拟 DOM 树进行对比（Diffing）
   ↓
4. 计算出最小差异（Reconciliation）
   ↓
5. 只更新真实 DOM 中变化的部分

Пояснение к диаграмме:

• Виртуальный DOM — это легковесное представление DOM браузера в виде объекта JavaScript.
• Когда состояние изменяется, фреймворк (например, React) сначала вычисляет и сравнивает в виртуальном DOM (алгоритм diff).
• Затем в процессе патчинга к реальному DOM применяются только минимально необходимые обновления.

Зачем нам нужен виртуальный DOM?

Проблемы с операциями над реальным DOM:

• Операции с DOM очень медленные (по сравнению с операциями в JavaScript)
• Частые операции с DOM вызывают перекомпоновку и перерисовку страницы
• Прямое манипулирование DOM чревато ошибками

Преимущества виртуального DOM:

• Оптимизация производительности: пакетные обновления, сокращающие количество операций с реальным DOM
• Кроссплатформенность: виртуальный DOM может рендериться на разных платформах (веб, мобильные, десктопные)
• Декларативность: разработчикам нужно заботиться только о состоянии, а не вручную манипулировать DOM

Сравнение на примере:

// 假设要更新 1000 个列表项
const items = Array(1000).fill(0).map((_, i) => i);

// 传统方式：每次都操作真实 DOM（慢）
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li); // 1000 次 DOM 操作
});

// React 方式：通过虚拟 DOM 批量更新
function ItemList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}
// React 会智能地批量更新 DOM

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

Данные в React распространяются однонаправленно вниз, Родитель → Ребёнок, и Ребёнок не может вернуться к Родителю:

React использует подход к потоку данных сверху вниз:

父组件
  ↓ (props)
子组件
  ↓ (props)
孙组件

Характеристики：

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

Основные преимущества React

1. Относительно плавная кривая обучения

• Меньше основных API
• В основном использует знания JavaScript
• Понятные концепции, хорошо документированы

2. Мощная экосистема

• Маршрутизация：React Router
• Управление состоянием：Redux, Zustand, Jotai
• UI-библиотеки：Material-UI, Ant Design, Chakra UI
• Инструментальная цепочка：Create React App, Vite, Next.js

3. Широкая поддержка сообщества

• Одна из самых популярных фронтенд-библиотек на GitHub
• Большое количество сторонних компонентов и инструментов
• Активное сообщество и множество учебных ресурсов

4. Отличная производительность

• Оптимизация виртуального DOM
• Рендеринг по требованию
• Поддержка разделения кода и ленивой загрузки

5. Кроссплатформенные возможности

• React Native: Разработка мобильных приложений
• React Native for Windows: Настольные приложения
• React 360: VR-приложения

6. Поддержка приложений корпоративного уровня

Используется многими известными компаниями:

• Facebook/Meta
• Instagram
• Netflix
• Airbnb
• Uber
• Tencent, Alibaba и т. д.

Подходящие сценарии использования React

Сценарии, подходящие для React:

• Одностраничные приложения (SPA)
• Динамические интерфейсы, требующие частых обновлений
• Сложные интерактивные интерфейсы
• Крупные проекты, требующие повторного использования компонентов
• Приложения, требующие кросс-платформенной разработки

Менее подходящие сценарии:

• Простые статические сайты (возможно, избыточно сложное решение)
• Сайты с чрезвычайно высокими требованиями к SEO (необходимо комбинировать с SSR-решениями, такими как Next.js)
• Команды, не знакомые с JavaScript

Сравнение React с другими фреймворками

История развития React

• 2013: React стал открытым исходным кодом
• 2015: Выпущен React Native
• 2016: React 16 (архитектура Fiber)
• 2019: Официально выпущены React Hooks
• 2020: Экспериментальная версия Concurrent Mode
• 2022: React 18 (конкурентный рендеринг)
• 2024-2025: Новые возможности, такие как React Compiler, Server Components