Что такое React

Вопрос

Что такое React

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает основное назначение React, его ключевые концепции (компоненты, VDOM) и преимущества перед другими библиотеками/фреймворками. Также важно показать осведомлённость о сфере применения (клиент/сервер).

Ключевые тезисы

• React — это JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов (UI), разработанная Facebook.
• React использует компонентный подход, позволяя разбивать интерфейс на переиспользуемые и изолированные компоненты.
• React работает с виртуальным DOM (VDOM), что оптимизирует производительность за счёт минимизации прямых операций с реальным DOM.
• React поддерживает односторонний поток данных (unidirectional data flow), что упрощает отладку и предсказуемость состояния приложения.
• React может использоваться как на клиенте (в браузере), так и на сервере (SSR с Next.js или аналогичными фреймворками).

Подробный ответ

React — это JavaScript-библиотека для построения пользовательских интерфейсов, разработанная компанией Meta (Facebook). React использует компонентный подход и декларативный стиль описания UI.

Ключевые концепции

Компоненты

Основная единица React — компонент. Это переиспользуемый блок UI, который принимает входные данные (props) и возвращает JSX-разметку.

JSX

JSX — синтаксическое расширение JavaScript, позволяющее писать HTML-подобную разметку прямо в JavaScript-коде. JSX компилируется в вызовы React.createElement().

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

Данные в React передаются сверху вниз — от родительских компонентов к дочерним через props. Это делает поток данных предсказуемым и упрощает отладку.

Состояние (State)

State — внутренние данные компонента, при изменении которых React автоматически перерисовывает компонент.

React Hooks

Хуки позволяют использовать состояние и другие возможности React в функциональных компонентах:

• useState — управление локальным состоянием
• useEffect — побочные эффекты (запросы, подписки, таймеры)
• useContext — доступ к контексту без prop drilling
• useMemo / useCallback — оптимизация производительности
• useRef — мутабельные ссылки и доступ к DOM

Virtual DOM

React использует Virtual DOM — легковесную копию реального DOM. При изменении состояния React сравнивает старое и новое дерево (diffing), вычисляет минимальный набор изменений и применяет их к реальному DOM.

Практические примеры

Пример 1

Функциональный компонент с состоянием

import { useState } from 'react';

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

  return (
    <div>
      <p>Счёт: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

useState возвращает текущее значение и функцию для его обновления. При вызове setCount компонент перерисовывается.

Пример 2

useEffect для загрузки данных

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // [] — выполнить один раз при монтировании

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Пустой массив зависимостей [] означает, что эффект выполнится только при монтировании компонента.

Частые ошибки

• Путаница между React и фреймворками, такими как Angular. React — это библиотека, а не полноценный фреймворк, что означает, что он предоставляет только инструменты для создания интерфейсов, но не решения для маршрутизации, управления состоянием и других задач.
• Неправильное использование состояния, например, прямое изменение состояния вместо использования функций обновления, таких как setState или useState.

Связанные темы

• JSX: Синтаксическое расширение JavaScript, позволяющее писать HTML-подобный код в React.
• Состояние и пропсы: Основные концепции управления данными в React.
• React Hooks: Современный подход к управлению состоянием и побочными эффектами в функциональных компонентах.
• Next.js: Фреймворк для серверного рендеринга и статической генерации React-приложений.

Follow-up вопросы

Чем React отличается от других библиотек или фреймворков, например, Angular?

Уровень: basic

React — это библиотека, а Angular — полноценный фреймворк. React фокусируется только на представлении (View), тогда как Angular предоставляет больше встроенных решений (например, DI, роутинг). React использует JSX и виртуальный DOM, а Angular — шаблоны и двустороннее связывание данных.

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

Уровень: intermediate

Виртуальный DOM — это легковесная копия реального DOM, хранящаяся в памяти. React сравнивает изменения в виртуальном DOM (diffing) и обновляет только те части реального DOM, которые действительно изменились (reconciliation), что повышает производительность.

Что такое JSX и зачем он нужен в React?

Уровень: basic

JSX — это синтаксическое расширение JavaScript, позволяющее писать HTML-подобный код в JavaScript. Он упрощает создание React-компонентов, делая их более читаемыми. Babel компилирует JSX в вызовы React.createElement().

Как React управляет состоянием приложения? Какие есть способы?

Уровень: intermediate

React предлагает несколько способов: локальное состояние компонента (useState, классовые this.state), контекст (Context API) для передачи данных без пропсов и сторонние решения (Redux, MobX). Выбор зависит от сложности приложения.

Что такое Fiber в React и как это влияет на рендеринг?

Уровень: advanced

Fiber — это новый алгоритм реконсиляции (reconciliation) в React 16+. Он позволяет разбивать рендеринг на части (инкрементальный рендеринг), приоритезировать задачи (например, анимации) и работать в фоновом режиме, улучшая производительность и отзывчивость.