Всегда ли React быстрее JavaScript

Всегда ли React быстрее JavaScript?

Это частая путаница. React это не конкурент JavaScript - это библиотека, написанная на JavaScript. Вопрос скорее звучит так: "Какой подход быстрее - React или vanilla JavaScript?" И ответ: не всегда React быстрее.

Уточнение терминов

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

// Vanilla JavaScript (чистый JS)
const button = document.getElementById("my-button");
button.addEventListener("click", () => {
  console.log("Clicked");
});

// React (использует JavaScript)
import React from "react";

function MyButton() {
  const handleClick = () => {
    console.log("Clicked");
  };
  
  return <button onClick={handleClick}>Click</button>;
}

Второй код тоже JavaScript, но внутри React фреймворка.

React vs Vanilla JavaScript: Производительность

Сценарий 1: Простое приложение

Vanilla JavaScript - быстрее:

// Vanilla JS - прямое манипулирование DOM
const counter = document.getElementById("counter");
let count = 0;

document.getElementById("btn").addEventListener("click", () => {
  count++;
  counter.textContent = count; // Прямое обновление
});

React - медленнее:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p id="counter">{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

В этом случае Vanilla JS выполняет 1 операцию, React:

1. Обновляет state
2. Вызывает Fiber reconciliation
3. Сравнивает Virtual DOM
4. Обновляет реальный DOM

Выход: Vanilla JS ~ на 50-100x быстрее для простых обновлений.

Сценарий 2: Сложная логика обновления

Vanilla JavaScript - медленнее:

const users = [
  { id: 1, name: "John", active: true },
  { id: 2, name: "Jane", active: false },
  // 1000+ пользователей
];

// Нужно вручную:
// 1. Отфильтровать
// 2. Отсортировать
// 3. Перестроить HTML
// 4. Обновить DOM

function renderUsers(filter) {
  const container = document.getElementById("users");
  container.innerHTML = ""; // Очистить (медленно!)
  
  const filtered = users.filter(u => u.active === filter);
  
  filtered.forEach(user => {
    const div = document.createElement("div");
    div.textContent = user.name;
    container.appendChild(div); // Медленно добавлять по одному
  });
}

renderUsers(true);
setTimeout(() => renderUsers(false), 1000); // Вся таблица перестроится!

React - быстрее:

import { useState, useMemo } from "react";

function UsersList() {
  const [filter, setFilter] = useState(true);
  
  // Мемоизированное вычисление
  const filtered = useMemo(
    () => users.filter(u => u.active === filter),
    [filter]
  );
  
  return (
    <div>
      <button onClick={() => setFilter(!filter)}>Toggle</button>
      {filtered.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

React:

• Не пересчитывает фильтрованный список, если filter не изменился
• Не пересоздаёт DOM элементы для неизменённых пользователей
• Ключи (key) помогают переиспользовать элементы

Выход: React ~ на 3-10x быстрее при сложной логике.

Почему React может быть быстрее

1. Virtual DOM и Reconciliation

// React вычисляет минимальное количество изменений
const before = { name: "John", age: 30, city: "NY" };
const after = { name: "John", age: 31, city: "NY" }; // Только age изменился

// React обновит только age, остальное оставит как есть
// Vanilla JS обновил бы весь div целиком

2. Батчинг обновлений

// React группирует обновления
function handleClick() {
  setName("Jane");
  setAge(25);
  setCity("LA");
  // React выполнит ONE render, не три!
}

// Vanilla JS выполнил бы три отдельных перестройки
document.getElementById("name").textContent = "Jane";
document.getElementById("age").textContent = 25;
document.getElementById("city").textContent = "LA";

3. Оптимизация через Keys

// С ключами React переиспользует DOM элементы
const items = [{id: 1, text: "A"}, {id: 2, text: "B"}, {id: 3, text: "C"}];

return items.map(item => (
  <li key={item.id}>{item.text}</li> // Ключ помогает React понять
)); // какой элемент переместился

// Без ключей React пересоздаст все элементы при переупорядочении

Когда использовать Vanilla JavaScript вместо React

Vanilla JS оптимален для:

1. Очень простые страницы

// Просто показать HTML
const page = document.getElementById("page");
// Может быть, несколько addEventListener

1. Требуется минимальный bundle

// React ~ 40KB (gzipped)
// Vanilla JS ~ 0KB (встроен в браузер)

// Для мобильных, где каждый KB важен

1. Высокопроизводительные анимации

// requestAnimationFrame с прямым DOM манипулированием
// React добавляет overhead

1. Встраивание в существующие системы

// Widget, который нужно вставить в чужую страницу
// React может конфликтовать

Когда React явно быстрее

React оптимален для:

1. Динамические интерфейсы с часыми обновлениями

// Сложные фильтры, поиск, сортировка
// Реально работает на 1000+ элементов

1. Синхронизация состояния

// Когда нужно сохранять state в sync с UI
// React handles это автоматически

1. Коллаборативные приложения

// Real-time обновления, синхронизация между пользователями
// React справляется эффективнее

1. Масштабируемое приложение

// 1000+ строк кода
// React обеспечивает структуру и инструменты

Бенчмарк: Реальный пример

// Сценарий: List с 10000 элементов, фильтр, поиск, сортировка

// Vanilla JS
// Initial load: 150ms
// Filter: 200ms (пересчитать + перестроить весь DOM)
// Search: 300ms (очень медленно)

// React + memo + useMemo
// Initial load: 200ms (чуть медленнее)
// Filter: 50ms (только нужные элементы обновляются)
// Search: 20ms (с debounce и оптимизацией)

// Итог: React выигрывает на 60%+ при сложной логике

React оптимизации для скорости

// 1. Мемоизация компонентов
const UserItem = React.memo(({ user }) => (
  <div>{user.name}</div>
));

// 2. useMemo для дорогих вычислений
const sorted = useMemo(() => {
  return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

// 3. useCallback для стабильных функций
const handleChange = useCallback((e) => {
  setSearch(e.target.value);
}, []);

// 4. Code splitting и lazy loading
const HeavyComponent = React.lazy(() => import("./Heavy"));

// 5. Виртуализация для больших списков
import { FixedSizeList } from "react-window";

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={35}
>
  {({ index, style }) => (
    <div style={style}>{items[index]}</div>
  )}
</FixedSizeList>

Сравнение: Метрики

Вывод

React не всегда быстрее:

• На простых страницах Vanilla JS быстрее
• React добавляет overhead для простых случаев
• Но React быстрее на сложных, динамических интерфейсах

Выбирай инструмент по задаче:

• Статическая страница? -> HTML + vanilla JS
• Интерактивное приложение? -> React
• E-commerce со множеством фильтров? -> React
• Простой виджет? -> Vanilla JS

Ключевой фактор: React победит не за счёт скорости JavaScript, а за счёт эффективного управления DOM обновлениями при сложной логике.