Состояние и перерисовка

Экран ничего не помнит. Он показывает то, что ему нарисовали, и если спросить у него, сколько задач осталось невыполненными, придётся пересчитывать строки разметки. Поэтому правду держат отдельно — в обычном массиве объектов.

let tasks = [
  { id: 1, title: "Купить хлеб", done: true },
  { id: 2, title: "Позвонить маме", done: false }
];
console.log(tasks.length);
console.log(tasks[0].done);

Как выглядит одна задача, решено в плане — в разделе про формат задачи: объект с полями id, title и done. Здесь важно другое: всё, что видит пользователь, — производное от массива таких объектов: и список, и счётчик оставшихся дел, и надпись о том, что дел больше нет. Такой массив называют состоянием приложения.

render — функция без сюрпризов: получает массив, возвращает то, что нужно показать. Она ничего не запоминает между вызовами, поэтому один и тот же массив всегда даёт один и тот же экран.

const tasks = [
  { id: 1, title: "Хлеб", done: true },
  { id: 2, title: "Мама", done: false }
];
const render = (list) =>
  list.map((t) => (t.done ? "[x] " : "[ ] ") + t.title).join(" | ");
console.log(render(tasks));

Разметки у этого примера нет — вставлять некуда, — поэтому render просто возвращает строку, а мы её печатаем. В настоящем проекте отличается ровно одна строчка: вместо console.log будет container.innerHTML = render(tasks). Смысл тот же — экран собирается из состояния целиком, а не подправляется по кусочкам.

Добавление задачи — операция над массивом, а не над экраном. Спред ... копирует то, что было, новая задача приезжает в конец, и сразу за этим зовётся render.

let tasks = [{ id: 1, title: "Хлеб", done: false }];
const render = (list) => list.map((t) => t.title).join(", ");
function addTask(title) {
  tasks = [...tasks, { id: tasks.length + 1, title, done: false }];
  console.log(render(tasks));
}
addTask("Молоко");
addTask("Сыр");

Удаление — это filter: он оставляет всё, что не совпало по id. Обратите внимание, что мы ни разу не искали строку на экране — мы искали объект в массиве.

let tasks = [
  { id: 1, title: "Хлеб" },
  { id: 2, title: "Сыр" },
  { id: 3, title: "Мама" }
];
tasks = tasks.filter((t) => t.id !== 2);
console.log(tasks.map((t) => t.title).join(", "));

let lastId = 0;
const nextId = () => ++lastId;
console.log(nextId(), nextId(), nextId());

Переключение — самая тонкая из трёх операций: меняется одна задача, а остальные обязаны остаться прежними. map проходит по всем и подменяет только совпавшую по id.

let tasks = [
  { id: 1, title: "Хлеб", done: false },
  { id: 2, title: "Сыр", done: true }
];
const toggle = (id) =>
  tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
tasks = toggle(1);
console.log(tasks[0].done, tasks[1].done);

Выражение { ...t, done: !t.done } — копия задачи с перевёрнутым флагом. Старый объект мы не трогаем: так проще откатывать изменения, сравнивать версии состояния и искать ошибки, а библиотеки вроде React именно на таком сравнении и держатся.

const a = { done: false };
const b = a;
b.done = true;
console.log(a.done);
const c = { ...a, done: false };
console.log(a.done, c.done);

Сложим правило, по которому живёт весь проект: событие меняет состояние, изменение состояния вызывает render, render рисует экран. Обратной стрелки нет — ни один обработчик не имеет права дописать что-то в интерфейс мимо состояния. Удобно завести единственную дверь setState, через которую проходят все изменения.

let state = { tasks: [], filter: "all" };
const render = () =>
  console.log(state.tasks.length + " шт., фильтр: " + state.filter);
function setState(patch) {
  state = { ...state, ...patch };
  render();
}
setState({ tasks: ["Хлеб"] });
setState({ filter: "done" });

Тянет поправить экран напрямую — значит, чего-то не хватает в состоянии. Добавьте поле, а не строчку в разметку.

Такой поток называют однонаправленным. Он скучный, и в этом вся ценность: чтобы понять, почему на экране три задачи, достаточно посмотреть на tasks, а не восстанавливать историю кликов.