Свой рендер: от описания к узлам

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Соберём рендер целиком: описание — узлы — правка. Ни одного нового приёма не понадобится. createElement, setAttribute и append вы писали руками ещё в части II, объект-описание держали в руках абзацем выше, а клея между ними нужно меньше, чем кажется.

Первая функция — та, в которую компилятор переписывает JSX. Назовём её h: под этим именем она живёт в Preact и во Vue, а в React её зовут createElement. Всё, что она делает, — раскладывает три вещи по трём полям.

ts

interface El {
  type: string;
  props: Record<string, string>;
  children: (El | string)[];
}

// ровно то, что компилятор делает с JSX: тег, атрибуты и дети — в один объект
function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El {
  return { type, props: props ?? {}, children };
}

const view = h(
  "div",
  { id: "card" },
  h("h2", null, "Кофе"),
  h("input", { id: "note", placeholder: "сколько ложек" })
);

console.log(view.type);
console.log(view.children.length);
console.log(view.children[0]);
console.log(document.getElementById("card"));

страница примера

Сначала предположите, что выведет код

Никакой обработки, никакой проверки — просто объект. Важнее всего последняя строка: document.getElementById("card") даёт null. Описание ничего не рисует и про страницу не знает вовсе; это данные, и главное их свойство в том, что их можно сравнить с прошлыми.

Имена пропсов у нас пишутся как в HTML: class, onclick. У React между JSX и DOM стоит таблица соответствий — она переводит className в атрибут class, а onClick в обработчик. У нашего рендера такой таблицы нет, поэтому и имена берём те, что понимает сам браузер.

Настоящий createElement делает ровно то же самое, только дети у него уезжают в props.children, а рядом появляются key и служебные поля. Нам дети удобнее отдельным полем: сверять их придётся чаще всего.

tsx

interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;

const theirs = <h2 id="t">Кофе</h2>;
const mine = h("h2", { id: "t" }, "Кофе");

console.log(theirs.type === mine.type);
console.log(theirs.props.id === mine.props.id);
console.log(theirs.props.children);
console.log(mine.children);

страница примера

Сначала предположите, что выведет код

Разница чисто вкусовая, и она ничего не меняет в дальнейшем: сверять мы будем поле children, React — проп с тем же именем.

Вторая функция превращает описание в узлы. Правил ровно три: строка становится текстовым узлом, объект — элементом с атрибутами, дети обходятся тем же create. Описание — дерево, поэтому обход рекурсивный.

Прежде чем жать Run, скажите, что именно окажется в app.innerHTML — вплоть до кавычек.

ts

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;

// описание — дерево, поэтому обход рекурсивный: сам узел, потом его дети
function create(node: El | string): Node {
  if (typeof node === "string") return document.createTextNode(node);
  const dom = document.createElement(node.type);
  for (const name of Object.keys(node.props)) dom.setAttribute(name, node.props[name]);
  for (const child of node.children) dom.append(create(child));
  return dom;
}

const view = h(
  "div",
  { id: "card" },
  h("h2", null, "Кофе"),
  h("input", { id: "note", placeholder: "сколько ложек" })
);

const app = document.getElementById("app")!;
app.append(create(view));

console.log(app.innerHTML);
console.log(document.getElementById("note") instanceof HTMLInputElement);

страница примера

Сначала предположите, что выведет код

Каждой вершине описания достался свой узел: три элемента и один текстовый. Разбора HTML при этом не было — строку с разметкой браузер здесь не читал, узлы построены поштучно, а innerHTML в конце только показывает результат. Заодно видно, что placeholder доехал настоящим атрибутом, а не текстом.

Пока это ровно то же, что делал ваш render() из части II, только длиннее. Разница появится, когда то же самое описание понадобится нарисовать во второй раз.

Данные изменились. Самый очевидный ход — позвать create ещё раз и заменить им содержимое. Читатель к этому моменту успел напечатать в поле и поставить каретку в середину. Прогноз: что от набранного останется?

ts

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h("div", { id: "card" }, h("h2", null, title), h("input", { id: "note" }));

app.append(create(view("Кофе")));

const note = document.getElementById("note") as HTMLInputElement;
note.value = "две ложки";
note.focus();
note.setSelectionRange(3, 3); // каретка после «две»

// перерисовка в лоб: снести всё и собрать заново
app.replaceChildren(create(view("Чай")));

const again = document.getElementById("note") as HTMLInputElement;
console.log(app.querySelector("h2")!.textContent);
console.log(again === note);
console.log(again.value === "");
console.log(again.selectionStart);

страница примера

Сначала предположите, что выведет код

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

Разница появляется, как только на руках оказываются два описания — прошлое и новое. Их можно сравнить и тронуть только то, что разошлось. Это и есть третья функция; она длиннее двух предыдущих, но в ней нет ничего, кроме четырёх решений: заменить узел, поправить текст, поправить атрибуты, спуститься к детям.

ts

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;

function update(dom: Node, before: El | string, after: El | string): Node {
  // разошёлся сам вид узла — чинить нечего, строим новый и ставим на место
  if (typeof before === "string" || typeof after === "string" || before.type !== after.type) {
    if (typeof before === "string" && typeof after === "string") {
      if (before !== after) dom.nodeValue = after;
      return dom;
    }
    const fresh = create(after);
    (dom as ChildNode).replaceWith(fresh);
    return fresh;
  }
  const el = dom as HTMLElement;
  for (const name of Object.keys(before.props)) {
    if (!(name in after.props)) el.removeAttribute(name);
  }
  for (const name of Object.keys(after.props)) {
    if (before.props[name] !== after.props[name]) el.setAttribute(name, after.props[name]);
  }
  // дети сверяются по позиции: i-й старый против i-го нового
  for (let i = 0; i < after.children.length; i += 1) {
    if (i < before.children.length) update(el.childNodes[i], before.children[i], after.children[i]);
    else el.append(create(after.children[i]));
  }
  while (el.childNodes.length > after.children.length) el.lastChild!.remove();
  return dom;
}

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h("div", { id: "card" }, h("h2", null, title), h("input", { id: "note" }));

const shown = view("Кофе");
app.append(create(shown));

const note = document.getElementById("note") as HTMLInputElement;
note.value = "две ложки";
note.focus();
note.setSelectionRange(3, 3);
const letters = app.querySelector("h2")!.firstChild;

update(app.firstChild!, shown, view("Чай"));

console.log(app.querySelector("h2")!.textContent);
console.log(app.querySelector("h2")!.firstChild === letters);
console.log(document.getElementById("note") === note);
console.log(note.value);
console.log(note.selectionStart);

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h("div", { id: "card" }, h("h2", null, title), h("input", { id: "note" }));

const shown = view("Кофе");
app.append(create(shown));

const note = document.getElementById("note") as HTMLInputElement;
note.value = "две ложки";
note.focus();
note.setSelectionRange(3, 3);
const letters = app.querySelector("h2")!.firstChild;

update(app.firstChild!, shown, view("Чай"));

console.log(app.querySelector("h2")!.textContent);
console.log(app.querySelector("h2")!.firstChild === letters);
console.log(document.getElementById("note") === note);
console.log(note.value);
console.log(note.selectionStart);

страница примера

Сначала предположите, что выведет код

Заголовок сменился, а h2 остался прежним узлом — больше того, прежним остался текстовый узел внутри него, в нём поменялись только буквы. До поля update дошёл и ничего в нём не тронул: тип тот же, пропсы те же, детей нет — править нечего. Поэтому в нём и уцелели «две ложки» с кареткой на третьем символе.

Перечитайте update и убедитесь: в нём нет ни слова про поля ввода, каретку, выделение и прокрутку. Он их не спасает — он до них не дотрагивается. Тот же ответ вы читали в первой статье главы про настоящий React; теперь он написан вашими руками, и в нём нет ни одной строчки магии.

Фокус в примерах учебника не проверяем, хотя он уцелел бы по той же причине: кадр примера — отдельное окно, и получит ли оно фокус страницы, зависит от того, что вы запускали до этого. Значение поля и каретка таких капризов не знают.

Текст напрашивается править короче — у родителя: el.textContent = "Чай". Соблазн понятный, и на экране выйдет то же самое. Но textContent у элемента выбрасывает всех его детей и кладёт вместо них одного нового, а nodeValue меняет буквы внутри существующего узла. Разница видна на двух абзацах.

ts

const p = document.createElement("p");
p.append("было");
const text = p.firstChild!;

p.textContent = "стало";
console.log(p.firstChild === text);

const q = document.createElement("p");
q.append("было");
const other = q.firstChild!;

other.nodeValue = "стало";
console.log(q.firstChild === other);
console.log(q.textContent);

страница примера

Сначала предположите, что выведет код

Первое сравнение — false: узел с буквами «было» выброшен, на его месте новый. Второе — true: тот же узел, другие буквы. Для абзаца с одним текстом разница незаметна, но textContent не разбирает, что сносит: будь рядом с текстом ещё и поле ввода, оно уехало бы вместе со всем набранным. Правка на месте не трогает соседей по определению.

Живой интерфейс — это ещё и обработчики. В описании они выглядят обычным пропсом, только значение у него функция, а не строка. Значит, у пропса появляется второй тип, а create и update должны отличать одно от другого. Обе функции в подложке примера изменены ровно на одну строку: вместо setAttribute они зовут setProp. Осталось написать сам setProp — и первая версия пишется сама собой.

Карточка отрисовывается трижды: «Кофе», потом «Чай», потом «Вода». После этого — одно нажатие на кнопку. Прогноз перед запуском: сколько строк оно напечатает и какие?

ts

// из прошлых примеров: описание, h, create и update
type Prop = string | (() => void);
interface El { type: string; props: Record<string, Prop>; children: (El | string)[] }
declare function h(type: string, props: Record<string, Prop> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare let setProp: (el: HTMLElement, name: string, value: Prop) => void;

// setProp живёт в подложке — create и update зовут именно его, поэтому присваиваем, а не объявляем заново
setProp = (el, name, value) => {
  if (typeof value === "function") el.addEventListener(name.slice(2), value);
  else el.setAttribute(name, value);
};

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h(
    "div",
    { id: "card" },
    h("button", { id: "go", onclick: () => console.log("клик:", title) }, "нажать"),
    h("h2", null, title)
  );

let shown = view("Кофе");
app.append(create(shown));

for (const title of ["Чай", "Вода"]) {
  const next = view(title);
  update(app.firstChild!, shown, next);
  shown = next;
}

console.log(app.querySelector("h2")!.textContent);
document.getElementById("go")!.click(); // одно нажатие

// из прошлых примеров: описание, h, create и update
type Prop = string | (() => void);
interface El { type: string; props: Record<string, Prop>; children: (El | string)[] }
declare function h(type: string, props: Record<string, Prop> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare let setProp: (el: HTMLElement, name: string, value: Prop) => void;

// setProp живёт в подложке — create и update зовут именно его, поэтому присваиваем, а не объявляем заново
setProp = (el, name, value) => {
  if (typeof value === "function") el.addEventListener(name.slice(2), value);
  else el.setAttribute(name, value);
};

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h(
    "div",
    { id: "card" },
    h("button", { id: "go", onclick: () => console.log("клик:", title) }, "нажать"),
    h("h2", null, title)
  );

let shown = view("Кофе");
app.append(create(shown));

for (const title of ["Чай", "Вода"]) {
  const next = view(title);
  update(app.firstChild!, shown, next);
  shown = next;
}

console.log(app.querySelector("h2")!.textContent);
document.getElementById("go")!.click(); // одно нажатие

страница примера

Сначала предположите, что выведет код

Три строки на одно нажатие, и первая из них — «клик: Кофе», хотя такой карточки на экране давно нет. addEventListener не заменяет обработчик, а добавляет ещё один. А стрелка в описании создаётся заново при каждом вызове view, поэтому before.props.onclick !== after.props.onclick получается всегда — и подписка добавляется на каждую правку. Три отрисовки, три живых обработчика, и каждый помнит свой заголовок замыканием.

Лечится это тем, что у узла для события есть не только подписка, но и свойство: тот самый button.onclick, которому в части II отведён раздел «Старый способ: onclick» статьи «Что такое событие и как на него подписаться». Присваивание свойству заменяет прежнее значение, а не добавляет новое.

ts

// из прошлых примеров: описание, h, create и update
type Prop = string | (() => void);
interface El { type: string; props: Record<string, Prop>; children: (El | string)[] }
declare function h(type: string, props: Record<string, Prop> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare let setProp: (el: HTMLElement, name: string, value: Prop) => void;

setProp = (el, name, value) => {
  // обработчик кладём в свойство узла, а не через addEventListener
  if (typeof value === "function") Reflect.set(el, name, value);
  else el.setAttribute(name, value);
};

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h(
    "div",
    { id: "card" },
    h("button", { id: "go", onclick: () => console.log("клик:", title) }, "нажать"),
    h("h2", null, title)
  );

let shown = view("Кофе");
app.append(create(shown));
const button = document.getElementById("go")!;

for (const title of ["Чай", "Вода"]) {
  const next = view(title);
  update(app.firstChild!, shown, next);
  shown = next;
}

console.log(document.getElementById("go") === button);
button.click();

// из прошлых примеров: описание, h, create и update
type Prop = string | (() => void);
interface El { type: string; props: Record<string, Prop>; children: (El | string)[] }
declare function h(type: string, props: Record<string, Prop> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare let setProp: (el: HTMLElement, name: string, value: Prop) => void;

setProp = (el, name, value) => {
  // обработчик кладём в свойство узла, а не через addEventListener
  if (typeof value === "function") Reflect.set(el, name, value);
  else el.setAttribute(name, value);
};

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h(
    "div",
    { id: "card" },
    h("button", { id: "go", onclick: () => console.log("клик:", title) }, "нажать"),
    h("h2", null, title)
  );

let shown = view("Кофе");
app.append(create(shown));
const button = document.getElementById("go")!;

for (const title of ["Чай", "Вода"]) {
  const next = view(title);
  update(app.firstChild!, shown, next);
  shown = next;
}

console.log(document.getElementById("go") === button);
button.click();

страница примера

Сначала предположите, что выведет код

Одна строка, и она с последним заголовком. Кнопка при этом — тот же самый узел с первой отрисовки: обработчик прикрепился к ней один раз, а дальше в свойстве менялась только функция. Отсюда и ответ на вопрос, который возникает у всех при первом взгляде на JSX: onClick в разметке не значит «подписаться заново на каждой отрисовке» — подписки на узел там нет вовсе.

Настоящий React идёт ещё дальше и не вешает обработчик на сам узел: он слушает корень приложения и находит нужный обработчик по описанию. Как это устроено — в главе про события.

Осталось честно посмотреть, где наш рендер ломается. Слабое место видно прямо в коде update: дети сверяются по номеру — i-й старый против i-го нового. Пока список растёт снизу, номера совпадают с записями и всё сходится.

Прогноз: в списке две строки, в поле первой набрано «две ложки», и в начало добавляется третья запись. Где окажется набранное?

ts

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;

const app = document.getElementById("app")!;
const board = (titles: string[]): El =>
  h("ul", { id: "board" }, ...titles.map((title) => h("li", null, title, h("input", {}))));

const shown = board(["Кофе", "Чай"]);
app.append(create(shown));

const first = app.querySelector("input")!;
first.value = "две ложки"; // читатель печатает в строке «Кофе»

update(app.firstChild!, shown, board(["Вода", "Кофе", "Чай"]));

const rows = Array.from(document.querySelectorAll("li"), (li) => {
  const field = li.querySelector<HTMLInputElement>("input")!;
  return li.firstChild!.nodeValue + ": " + field.value;
});
console.log(rows);
console.log(app.querySelector("input") === first);

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;

const app = document.getElementById("app")!;
const board = (titles: string[]): El =>
  h("ul", { id: "board" }, ...titles.map((title) => h("li", null, title, h("input", {}))));

const shown = board(["Кофе", "Чай"]);
app.append(create(shown));

const first = app.querySelector("input")!;
first.value = "две ложки"; // читатель печатает в строке «Кофе»

update(app.firstChild!, shown, board(["Вода", "Кофе", "Чай"]));

const rows = Array.from(document.querySelectorAll("li"), (li) => {
  const field = li.querySelector<HTMLInputElement>("input")!;
  return li.firstChild!.nodeValue + ": " + field.value;
});
console.log(rows);
console.log(app.querySelector("input") === first);

страница примера

Сначала предположите, что выведет код

«Две ложки» достались «Воде», которую только что добавили. Ошибки в update при этом нет ни одной: на позиции 0 стоял li — li и остался, внутри стоял input с теми же пропсами, значит, трогать его незачем. Поменялся только текст. Последняя строка вывода подтверждает: узел поля тот же самый — переехали не узлы, а данные.

Причина одна: у позиции нет тождества. «Первая строка» — это не запись, это место. Чтобы update понял, что запись переехала, в описании должна стоять метка, которую он сверит вместо номера. Как эта метка называется, вы узнаете уже в следующей статье — и увидите, что настоящий React без неё ведёт себя в точности как наши тридцать строк.

Что делает наш рендер	Как это устроено у React
`h` собирает описание	`createElement`, в который компилятор переписывает JSX
`create` строит узлы по описанию	первая отрисовка, она же монтирование
`update` сравнивает два описания и правит разницу	сверка описаний и правки в DOM
обработчик кладётся в свойство узла	один слушатель на корне приложения
дети сверяются по номеру позиции	по метке из описания, а по номеру — только когда метки нет
рисуем сразу, в тот же миг	отрисовка ставится в очередь: когда взяться, решает React
описание пишется руками, вызов за вызовом	компоненты, состояние и хуки — надстройка над теми же тремя шагами

Правая колонка — почти оглавление того, что ждёт дальше: в этой главе и двух следующих. Но самое дорогое уже позади: описание, узлы и правка разницы — три шага, на которых стоит React, а с ним Preact и Vue, и все три вы только что написали сами.

Рендер укладывается в три функции: h собирает описание, create строит по нему узлы, update сравнивает два описания и правит только разницу.
Описание — просто данные: пока его не отдали в create, в документе нет ни одного узла.
Повторный create — это тот же innerHTML другими руками: новые узлы, пустое поле, каретка в нуле.
Ничего специального ради фокуса и каретки писать не нужно: они остаются целы потому, что узел не пересоздан, — в update нет о них ни слова.
Обработчик кладётся в свойство узла, а не подписывается заново: addEventListener на каждой правке копит подписки, и одно нажатие срабатывает столько раз, сколько было отрисовок.
Дети сверяются по позиции — и здесь рендер ломается: вставка в начало оставляет узлы на местах, а данные съезжают на соседей.

1/4Наш update поменял заголовок карточки. Почему набранный в соседнем поле текст уцелел?

2/4Внутри setProp обработчик вешается через addEventListener. Карточку отрисовали три раза подряд. Что напечатает одно нажатие на кнопку?

3/4В новом описании на месте <h2> оказался <h3>. Что сделает наш update?

4/4Список ["Кофе", "Чай"] стал ["Вода", "Кофе", "Чай"]. В поле первой строки было набрано «две ложки». Где оно окажется после update?

Поле не слушается описания

В карточке живёт поле с ником. Читатель поправил его руками, а потом описание сменилось на «админ» — и поле осталось прежним, хотя атрибут в разметке обновился. Почините setProp, больше ничего не трогая. Подсказка живёт в части II — в разделе «Поля формы: value и checked» статьи «Атрибуты и свойства».

ts

// из прошлых примеров: описание, h, create и update
type Prop = string | (() => void);
interface El { type: string; props: Record<string, Prop>; children: (El | string)[] }
declare function h(type: string, props: Record<string, Prop> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare let setProp: (el: HTMLElement, name: string, value: Prop) => void;

setProp = (el, name, value) => {
  if (typeof value === "function") Reflect.set(el, name, value);
  else el.setAttribute(name, value); // ваша правка нужна здесь
};

const app = document.getElementById("app")!;
const view = (nick: string): El => h("div", { id: "card" }, h("input", { id: "nick", value: nick }));

const shown = view("гость");
app.append(create(shown));

const nick = document.getElementById("nick") as HTMLInputElement;
nick.value = "Рико"; // читатель поправил поле руками

update(app.firstChild!, shown, view("админ")); // а описание говорит «админ»

console.log(nick.getAttribute("value")); // атрибут послушался описания — дело не в нём
console.log(nick.value); // сейчас Рико, а нужно админ

// из прошлых примеров: описание, h, create и update
type Prop = string | (() => void);
interface El { type: string; props: Record<string, Prop>; children: (El | string)[] }
declare function h(type: string, props: Record<string, Prop> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare let setProp: (el: HTMLElement, name: string, value: Prop) => void;

setProp = (el, name, value) => {
  if (typeof value === "function") Reflect.set(el, name, value);
  else el.setAttribute(name, value); // ваша правка нужна здесь
};

const app = document.getElementById("app")!;
const view = (nick: string): El => h("div", { id: "card" }, h("input", { id: "nick", value: nick }));

const shown = view("гость");
app.append(create(shown));

const nick = document.getElementById("nick") as HTMLInputElement;
nick.value = "Рико"; // читатель поправил поле руками

update(app.firstChild!, shown, view("админ")); // а описание говорит «админ»

console.log(nick.getAttribute("value")); // атрибут послушался описания — дело не в нём
console.log(nick.value); // сейчас Рико, а нужно админ

страница примера

Сначала предположите, что выведет код

Атрибут value задаёт полю начальное значение: после того как в поле что-то ввели, атрибут на него больше не влияет. Значит, такие пропсы нужно класть в свойство узла, а не в атрибут.

jsлистинг · не запускается

setProp = (el, name, value) => {
  // value и checked живут в свойстве узла, атрибут задаёт лишь начальное
  if (typeof value === "function" || name === "value" || name === "checked") {
    Reflect.set(el, name, value);
  } else {
    el.setAttribute(name, value);
  }
};

setProp = (el, name, value) => {
  // value и checked живут в свойстве узла, атрибут задаёт лишь начальное
  if (typeof value === "function" || name === "value" || name === "checked") {
    Reflect.set(el, name, value);
  } else {
    el.setAttribute(name, value);
  }
};

Теперь вывод другой: getAttribute("value") даёт null — атрибут мы не ставим вовсе, — а nick.value даёт «админ».

Но починка половинчатая. Если описание не изменилось — снова «админ», — а читатель успел напечатать своё, update увидит два одинаковых пропса и поле не тронет: напечатанное останется, хотя описание говорит другое. Наш рендер сверяет прошлое описание с новым и верит, что DOM совпадает с прошлым, а поле ввода — ровно то место, где пользователь меняет DOM в обход описания. Поэтому управляемое поле в React сверяет value не с прошлым описанием, а с живым node.value — и возвращает «админ», даже когда пропс не менялся.

Сколько узлов создаёт правка

Утверждение «update не пересоздаёт узлы» стоит проверить, а не принять на веру. Посчитайте вызовы document.createElement: сколько узлов создаёт первая сборка карточки и сколько — смена одного заголовка. Пока счётчик не подменён, обе строки печатают ноль, так что нулю верьте только после правки.

ts

// из прошлых примеров: описание, h, create и update
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;

let made = 0;
// ваш код: подмените document.createElement так, чтобы считать вызовы

const app = document.getElementById("app")!;
const view = (title: string): El =>
  h("div", { id: "card" }, h("h2", null, title), h("input", { id: "note" }));

const shown = view("Кофе");
app.append(create(shown));
console.log("узлов при сборке:", made); // сейчас 0, а нужно 3

made = 0;
update(app.firstChild!, shown, view("Чай"));
console.log("узлов при правке:", made); // сейчас 0: счётчик ещё не подменён
console.log(app.querySelector("h2")!.textContent);

страница примера

Сначала предположите, что выведет код

Подмена метода — обычный приём отладки: сохраняем настоящий, кладём на его место свой, свой считает и зовёт настоящий.

tsлистинг · не запускается

const real = document.createElement.bind(document);
document.createElement = ((tag: string) => {
  made += 1;
  return real(tag);
}) as typeof document.createElement;

const real = document.createElement.bind(document);
document.createElement = ((tag: string) => {
  made += 1;
  return real(tag);
}) as typeof document.createElement;

Получается 3 и 0: три узла на сборку карточки (div, h2, input) и ни одного на смену заголовка — там правился nodeValue существующего текстового узла. Повторный create вместо update дал бы три узла на каждую правку, и так на каждое нажатие клавиши в живом интерфейсе.

Куда уедет текст

В списке три строки, в поле «Чая» набрано «без сахара». Запись «Чай» убирают из середины. Сначала запишите прогноз — какими окажутся обе оставшиеся строки, — и только потом запускайте.

ts

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;

const app = document.getElementById("app")!;
const board = (titles: string[]): El =>
  h("ul", { id: "board" }, ...titles.map((title) => h("li", null, title, h("input", {}))));

const shown = board(["Кофе", "Чай", "Вода"]);
app.append(create(shown));

const fields = document.querySelectorAll<HTMLInputElement>("input");
fields[1].value = "без сахара"; // печатаем в строке «Чай»

update(app.firstChild!, shown, board(["Кофе", "Вода"])); // «Чай» убрали

const rows = Array.from(document.querySelectorAll("li"), (li) => {
  const field = li.querySelector<HTMLInputElement>("input")!;
  return li.firstChild!.nodeValue + ": " + field.value;
});
console.log(rows); // предскажите это

// из прошлых примеров: описание и h
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
declare function h(type: string, props: Record<string, string> | null, ...children: (El | string)[]): El;
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;

const app = document.getElementById("app")!;
const board = (titles: string[]): El =>
  h("ul", { id: "board" }, ...titles.map((title) => h("li", null, title, h("input", {}))));

const shown = board(["Кофе", "Чай", "Вода"]);
app.append(create(shown));

const fields = document.querySelectorAll<HTMLInputElement>("input");
fields[1].value = "без сахара"; // печатаем в строке «Чай»

update(app.firstChild!, shown, board(["Кофе", "Вода"])); // «Чай» убрали

const rows = Array.from(document.querySelectorAll("li"), (li) => {
  const field = li.querySelector<HTMLInputElement>("input")!;
  return li.firstChild!.nodeValue + ": " + field.value;
});
console.log(rows); // предскажите это

страница примера

Сначала предположите, что выведет код

Вывод — ["Кофе: ", "Вода: без сахара"]. Сверка идёт по номеру: на позиции 0 «Кофе» встретился с «Кофе», на позиции 1 «Чай» встретился с «Водой» — тип совпал, поэтому узел строки остался прежним, поменялся только текст, а поле с набранным «без сахара» никто не трогал. Третья строка оказалась лишней, и её убрал последний цикл update.

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

Свой рендер: от описания к узлам

Видеоразбор темы за 5–7 минут

h()Тег, атрибуты и дети — в один объект

create()Из описания — узлы: createElement, setAttribute, append

update()Правка вместо пересборки — и почему уцелела каретка

Обработчик вешается один разПочему addEventListener здесь — ловушка

Сверка по позиции и её ценаКуда уезжает набранный текст, когда список растёт сверху

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Поле не слушается описания

Сколько узлов создаёт правка

Куда уедет текст