React - это компилятор или Runtime библиотека

React: Компилятор или Runtime?

Ответ: React — это Runtime библиотека, но с элементами компиляции. Это гибридный подход, и нужно понимать оба аспекта для полного понимания того, как React работает.

React как Runtime библиотека

В первую очередь, React — это JavaScript библиотека, работающая во время выполнения (runtime). Она:

1. Управляет Virtual DOM

   const virtualElement = React.createElement(
     "div",
     { className: "container" },
     "Привет, мир!"
   );
   

2. Отслеживает изменения состояния

   const [count, setCount] = useState(0);
   // setCount работает во время выполнения
   

3. Выполняет reconciliation (согласование)

   • Сравнивает старый и новый Virtual DOM
   • Определяет, какие элементы реально изменились
   • Обновляет только необходимые части страницы

4. Управляет жизненным циклом компонентов

   useEffect(() => {
     console.log("Компонент монтирован");
     return () => console.log("Компонент размонтирован");
   }, []);
   

Процесс Runtime

1. Браузер загружает JavaScript
2. React инициализируется
3. Компоненты рендерятся
4. React слушает события (клики, изменения input и т.д.)
5. При изменении состояния/props -> перерендеринг
6. Virtual DOM сравнивается с реальным DOM
7. Обновляются только измененные элементы

React как компилятор (JSX)

Однако React имеет компиляционный этап через JSX:

JSX синтаксис (похож на HTML):

function Hello() {
  return <h1>Привет, мир!</h1>;
}

Компилируется в:

function Hello() {
  return React.createElement("h1", null, "Привет, мир!");
}

Этот процесс компиляции происходит до запуска кода в браузере:

Исходный код (.jsx/.tsx)
        |
        v
Babel (компилятор)
        |
        v
JS код с React.createElement
        |
        v
Бандлер (webpack, esbuild)
        |
        v
Производственный JavaScript
        |
        v
Браузер (Runtime)

Современное развитие: React как Compiler

В React 19+ добавляются элементы настоящей компиляции:

// React 19 Feature: Auto memoization
function Component({ data }) {
  // React компилятор автоматически оптимизирует это
  const value = computeExpensive(data);
  return <div>{value}</div>;
}

React компилятор анализирует код и:

• Автоматически мемоизирует значения
• Оптимизирует перерендеринги
• Удаляет ненужные зависимости в useEffect

Сравнение подходов

Полностью Runtime (как было раньше)

// Все оптимизации вручную
const memoized = useMemo(() => computeExpensive(data), [data]);
const callback = useCallback(() => handler(), []);
const Comp = React.memo(Component);

Современный React (Compiler + Runtime)

// Компилятор понимает зависимости автоматически
const value = computeExpensive(data);

Архитектура React

┌─────────────────────────────────────┐
│       JSX / Компоненты               │
└────────────┬────────────────────────┘
             |
             v
┌─────────────────────────────────────┐
│    Babel (Компилятор JSX)            │
└────────────┬────────────────────────┘
             |
             v
┌─────────────────────────────────────┐
│  React.createElement() вызовы        │
└────────────┬────────────────────────┘
             |
             v
┌─────────────────────────────────────┐
│   React Runtime (Reconciliation)     │
│  - Virtual DOM                       │
│  - State Management                  │
│  - Lifecycle                         │
│  - Event Handling                    │
└────────────┬────────────────────────┘
             |
             v
┌─────────────────────────────────────┐
│      Реальный DOM                    │
│    (в браузере)                      │
└─────────────────────────────────────┘

Примеры Runtime поведения

Пример 1: Reconciliation во время выполнения

function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// Когда пользователь кликает:
// 1. onClick срабатывает (Runtime событие)
// 2. setCount обновляет состояние
// 3. React перерендеривает компонент
// 4. Virtual DOM обновляется
// 5. Только <p> обновляется в реальном DOM

Пример 2: Ленивое вычисление состояния

const [user, setUser] = useState(() => {
  // Этот код выполняется ОДИН РАЗ при монтировании (Runtime)
  return loadUserFromLocalStorage();
});

Ключевые компоненты React Runtime

1. Fiber Architecture

   • Разбивает работу на малые куски
   • Позволяет браузеру обработать пользовательский ввод
   • Реализуется во время выполнения

2. Hooks System

   // Это Runtime механизм
   useState(), useEffect(), useMemo() и т.д.
   

3. Context API

   // Глобальное состояние, работающее во время выполнения
   <MyContext.Provider value={data}>
     <Child />
   </MyContext.Provider>
   

Отличие от других подходов

Svelte (Компилятор)

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  {count}
</button>

<style>
  button { color: red; }
</style>

Svelte компилирует в чистый JavaScript, без runtime библиотеки.

Vue (Hybrid)

// Vue похож на React: компиляция (шаблоны) + runtime
const { ref } = Vue;
const count = ref(0);

Выводы

• React — в первую очередь Runtime библиотека, которая управляет состоянием, Virtual DOM и обновлениями
• JSX требует компиляции, но это только трансформация синтаксиса
• React компилятор (новая фишка) добавляет настоящую компиляционную оптимизацию
• Без runtime React не работает — компилятор только готовит код, runtime выполняет его

Если коротко: React работает как Runtime, но использует Компилятор для обработки JSX и оптимизации кода перед тем, как этот код выполнится в браузере.