React или Angular: различия и когда что выбрать

React это библиотека JavaScript для построения пользовательских интерфейсов, а Angular это полноценный фреймворк для создания веб-приложений. В React вы пишете компоненты как функции, возвращающие JSX, и выбираете отдельные инструменты для маршрутизации, форм и данных; в Angular вы пишете классы TypeScript с шаблонами HTML и получаете маршрутизацию, формы, HTTP-клиент и внедрение зависимостей из коробки. Вот один и тот же счётчик на обоих.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Версия этого компонента на Angular:

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

Идеи совпадают один к одному: useState(0) в React это signal(0) в Angular, onClick={...} это (click)="...", а {count} это {{ count() }}. Разница в том, где живёт код: в React одна функция, возвращающая разметку, в Angular класс плюс строка шаблона.

Библиотека или фреймворк

Это различие определяет большинство остальных. React отвечает за рендеринг и состояние компонентов. Всё остальное на ваш выбор:

• Маршрутизация: React Router, TanStack Router или файловые маршруты фреймворка.
• Загрузка данных: fetch в эффекте, TanStack Query или загрузчики и серверные компоненты фреймворка.
• Формы: обычные контролируемые поля, действия форм React 19 или React Hook Form.
• Глобальное состояние: контекст, Zustand, Redux Toolkit, Jotai.

Многие команды избегают большей части этого выбора, начиная с фреймворка на React, например Next.js или React Router в режиме фреймворка, который объединяет маршрутизацию, загрузку данных и серверный рендеринг.

Angular делает этот выбор за вас: @angular/router, реактивные и шаблонные формы, HttpClient, внедрение зависимостей, настройка тестов и CLI ng, который генерирует компоненты и сервисы. Все проекты на Angular в целом выглядят одинаково, и это частая причина, по которой его выбирают крупные организации. Цена в том, что изучать нужно больше, а свободы заменить какую-то часть меньше.

JSX или шаблоны

Компоненты React возвращают JSX, а это JavaScript. Условия пишутся через && или тернарный оператор, списки через .map(), и всё, что можно сделать в JavaScript, можно сделать в разметке. Шаблоны Angular это HTML с собственным синтаксисом: @if, @for с track, привязки [property], привязки (event) и интерполяция {{ }}. Шаблоны явно разделяют разметку и логику; JSX держит их в одном месте и даёт весь язык. Вот отфильтрованный список, вторая функция для сравнения.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Наберите an в поле и смотрите в консоль: вся функция выполняется заново при каждом нажатии клавиши, а visible просто пересчитывается. Тот же компонент на Angular, с шаблоном в отдельном файле:

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

В Angular computed объявляет, что visible зависит от query, поэтому Angular знает, какой шаблон его читает, и пересчитывает visible только при изменении query. В React никакого объявления нет: компонент выполняется заново и пересчитывает. key={fruit} в React и track fruit в Angular делают одну работу: сообщают фреймворку, какой элемент списка какой.

Сначала JavaScript или сначала TypeScript

React это обычный JavaScript с JSX, а TypeScript это опция, которую вы добавляете (npm create vite@latest my-app -- --template react-ts). Большинство новых проектов на React её добавляют, но изучать React можно и без знания типов. Angular построен для TypeScript: декораторы, внедрение зависимостей и проверка типов в шаблонах на него рассчитывают. Если ваша команда уже пишет типизированный код, это не проблема; если вы новичок в программировании, это ещё одна вещь, которую нужно изучать одновременно. Страница о React с TypeScript показывает, как типизация работает на стороне React.

Поток данных и обнаружение изменений

Оба передают данные вниз через входные данные (пропсы в React, input() или @Input() в Angular) и отправляют события вверх через колбэки (функции, переданные как пропсы, в React, output() или @Output() в Angular). Разница в том, как каждый замечает изменение.

React считает состояние неизменяемыми снимками. Вы вызываете сеттер с новым значением, React заново выполняет функцию компонента, сравнивает новый JSX со старым и исправляет DOM. Ничего не отслеживается автоматически: функция рендера сама является графом зависимостей. Об этом легко рассуждать, а цена в том, что иногда приходится добавлять memo, useMemo или useCallback (или позволить React Compiler добавить их), чтобы пропустить работу.

Angular исторически использовал Zone.js, чтобы обнаруживать любое асинхронное событие, а затем проверял дерево компонентов на изменившиеся привязки. Современный Angular переходит на сигналы: signal, computed и effect отслеживают, какие значения читает каждый шаблон, поэтому Angular проверяет только компоненты, чьи сигналы изменились, а последние версии могут работать совсем без Zone.js. Шаблоны Angular не выполняют заново целую функцию при каждом изменении, как это делают компоненты React.

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

Управление состоянием

В React локальное состояние это useState или useReducer, общее состояние поднимается в родителя или кладётся в контекст, а состояние на всё приложение часто живёт в небольшой библиотеке-хранилище. В Angular локальное состояние это сигналы в компоненте, а общее обычно живёт в сервисе, который внедряется везде, где он нужен; внедрение зависимостей это встроенный ответ Angular на вопрос «как двум далёким компонентам делить данные». Для команд, которым нужно хранилище в стиле Redux, есть NgRx. Системы внедрения зависимостей в React нет; похожую роль выполняет контекст.

Сравнительная таблица

Порог входа

С React начать быстрее. Новичок, знающий JavaScript, может построить что-то настоящее, изучив компоненты, пропсы, состояние и эффекты, а страница что такое React объясняет всю идею за несколько минут. Обучение сдвигается на потом: нужно выбрать роутер, подход к загрузке данных и стратегию для форм, и разные проекты на React делают разный выбор.

У Angular старт круче: TypeScript, декораторы, шаблоны, сигналы, внедрение зависимостей, модули роутера и форм и RxJS для некоторых API. Зато когда вы это знаете, каждый проект на Angular использует одни и те же части одинаково, поэтому переходить между проектами проще.

Когда что выбрать

Выбирайте React, когда:

• Вам нужно небольшое ядро и свобода выбора остального или нужен фреймворк вроде Next.js для серверного рендеринга и файловых маршрутов.
• Вы планируете делать ещё и мобильные приложения, где React Native переиспользует ту же модель компонентов.
• Команде в основном удобен JavaScript или вы изучаете фронтенд-разработку и хотите самый короткий путь к работающему приложению.

Выбирайте Angular, когда:

• Большой команде нужна одна стандартная структура во многих проектах и меньше архитектурных решений для споров.
• Вам нужно, чтобы формы, HTTP, маршрутизацию и внедрение зависимостей поддерживала вместе одна команда, а CLI обновлял их вместе.
• Команда уже пишет на TypeScript и любит сервисы на классах и чёткое разделение шаблона и логики.

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