Angular vs React — одна задача, две философии

Контекст. Это компонент списка задач в приложении TaskFlow. Он хранит массив задач в «сигнале» и по клику переключает флаг completed у нужной задачи.

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

@Component({
  // selector — имя, под которым компонент вставляется в HTML
  selector: 'app-task-list',
  template: `
    @for (task of tasks(); track task.id) {
      <li [class.completed]="task.completed">
        {{ task.title }}
        <button (click)="toggle(task.id)">
          {{ task.completed ? 'Done' : 'Todo' }}
        </button>
      </li>
    }
  `
})
export class TaskListComponent {
  // signal — реактивное значение: при изменении UI сам перерисовывается
  tasks = signal([]);

  toggle(id) {
    // .update меняет значение сигнала; для каждой задачи берём копию
    // и у найденной по id инвертируем флаг completed (да/нет)
    this.tasks.update(list =>
      list.map(t =>
        t.id === id ? {...t, completed: !t.completed} : t
      )
    );
  }
}

Пошаговый разбор:

1. Создаём компонент TaskListComponent с шаблоном.
2. В шаблоне @for перебирает задачи из сигнала tasks() (скобки — это «прочитать значение сигнала»).
3. Для каждой задачи рисуем <li> с кнопкой; класс completed добавляется, если задача выполнена.
4. По клику вызывается toggle(id).
5. .update заменяет массив: у задачи с нужным id флаг completed меняется на противоположный.
6. Сигнал «уведомляет» шаблон — экран перерисовывается автоматически.

Контекст. Тот же компонент списка задач для TaskFlow, но написан на React. Задачи хранятся в «состоянии» через useState, а загрузка данных — в useEffect.

import { useState, useEffect } from 'react';

export default function TaskList() {
  // useState возвращает пару: [значение, функция_обновления]
  const [tasks, setTasks] = useState([]);

  // useEffect запускается один раз при показе компонента (пустой [])
  useEffect(() => {
    fetchTasks().then(data => setTasks(data));
  }, []);

  // toggle меняет состояние: инвертирует completed у задачи по id
  const toggle = (id) => {
    setTasks(list =>
      list.map(t =>
        t.id === id ? {...t, completed: !t.completed} : t
      )
    );
  };

  return (
    <ul>
      {tasks.map(t => (
        <li key={t.id}>
          {t.title}
          <button onClick={() => toggle(t.id)}>
            {t.completed ? 'Done' : 'Todo'}
          </button>
        </li>
      ))}
    </ul>
  );
}

Пошаговый разбор:

1. Через useState([]) создаём состояние tasks и функцию setTasks.
2. useEffect с пустым массивом [] запускается один раз и загружает задачи.
3. В return пишем JSX — это HTML внутри JavaScript (обратите внимание: class здесь className).
4. tasks.map(...) превращает каждую задачу в <li> с кнопкой.
5. По клику onClick вызывается toggle(t.id).
6. setTasks создаёт новый массив с инвертированным флагом completed у нужной задачи.
7. React видит новое состояние и перерисовывает список автоматически.