Своя сверка: что на самом деле делает key

// из статьи про свой рендер: описание, 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;
declare let syncChildren: (dom: Element, before: El, after: El) => void;

// та же сверка детей, что стояла внутри update, — просто вынесена в отдельную функцию
syncChildren = (dom, before, after) => {
  for (let i = 0; i < after.children.length; i += 1) {
    if (i < before.children.length) update(dom.childNodes[i], before.children[i], after.children[i]);
    else dom.append(create(after.children[i]));
  }
  while (dom.childNodes.length > after.children.length) dom.lastChild!.remove();
};

interface Item { id: string; title: string }
const app = document.getElementById("app")!;
const items: Item[] = [
  { id: "a", title: "Кофе" },
  { id: "b", title: "Чай" },
  { id: "c", title: "Вода" }
];
// метка записи уже лежит в описании — сверка на неё пока не смотрит
const board = (list: Item[]): El =>
  h("ul", null, ...list.map((item) => h("li", { key: item.id }, item.title + ": ", h("input", {}))));

const rows = () =>
  Array.from(app.querySelectorAll("li"), (li) =>
    li.firstChild!.nodeValue! + (li.querySelector("input")!.value || "—"));

const shown = board(items);
app.append(create(shown));
app.querySelectorAll("input")[1].value = "с молоком";
console.log(rows());

// ни одной записи не добавили и не убрали — только отсортировали
update(app.firstChild!, shown, board([...items].sort((a, b) => a.title.localeCompare(b.title))));
console.log(rows()); // ?
console.log(app.querySelector("li")!.hasAttribute("key")); // ?

// из прошлого примера: h, create, update, board, items и rows
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
interface Item { id: string; title: string }
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare function board(list: Item[]): El;
declare function rows(): string[];
declare const app: HTMLElement;
declare const items: Item[];
declare let syncChildren: (dom: Element, before: El, after: El) => void;

// ключа в описании нет — берём номер; решётка не даёт ему совпасть с настоящим ключом
const keyOf = (child: El | string, i: number): string =>
  typeof child !== "string" && "key" in child.props ? child.props.key : "#" + i;

syncChildren = (dom, before, after) => {
  // старых детей раскладываем по ключам — из прошлого описания, а не из разметки
  const was = new Map<string, { el: El | string; node: ChildNode }>();
  before.children.forEach((child, i) => was.set(keyOf(child, i), { el: child, node: dom.childNodes[i] }));
  after.children.forEach((child, i) => {
    const key = keyOf(child, i);
    const old = was.get(key);
    was.delete(key);
    dom.append(old ? update(old.node, old.el, child) : create(child));
  });
  for (const left of was.values()) left.node.remove(); // ключа не стало — узла тоже
};

const shown = board(items);
app.append(create(shown));
app.querySelectorAll("input")[1].value = "с молоком";
const tea = app.querySelectorAll("li")[1]; // узел строки «Чай» до сортировки

update(app.firstChild!, shown, board([...items].sort((a, b) => a.title.localeCompare(b.title))));
console.log(rows()); // ?
console.log(app.querySelectorAll("li")[2] === tea); // ?

// из прошлых примеров: h, create, update, rows, items и сверка по ключу
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
interface Item { id: string; title: 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;
declare function rows(): string[];
declare const app: HTMLElement;
declare const items: Item[];

// сверка та же, по ключу, — но в описании ключа нет
const plain = (list: Item[]): El =>
  h("ul", null, ...list.map((item) => h("li", null, item.title + ": ", h("input", {}))));

const shown = plain(items);
app.append(create(shown));
app.querySelectorAll("input")[1].value = "с молоком";

update(app.firstChild!, shown, plain([...items].sort((a, b) => a.title.localeCompare(b.title))));
console.log(rows()); // ?

interface Item {
  id: string;
  title: string;
}

function Board({ items }: { items: Item[] }) {
  // ключа нет вовсе — как в описании plain
  return (
    <ul>
      {items.map((item) => (
        <li>{item.title}: <input /></li>
      ))}
    </ul>
  );
}

const items: Item[] = [
  { id: "a", title: "Кофе" },
  { id: "b", title: "Чай" },
  { id: "c", title: "Вода" }
];
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<Board items={items} />);

const rows = () =>
  Array.from(document.querySelectorAll("li"), (li) =>
    li.textContent! + (li.querySelector("input")!.value || "—"));

setTimeout(() => {
  document.querySelectorAll("input")[1].value = "с молоком";
  const tea = document.querySelectorAll("li")[1]; // узел строки «Чай» до сортировки
  // второй вызов render у того же корня — обычная перерисовка, без состояния
  root.render(<Board items={[...items].sort((a, b) => a.title.localeCompare(b.title))} />);
  setTimeout(() => {
    console.log(rows()); // ?
    console.log(document.querySelectorAll("li")[1] === tea); // ?
  }, 50);
}, 50);

interface Item {
  id: string;
  title: string;
}

function Board({ items }: { items: Item[] }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}: <input /></li>
      ))}
    </ul>
  );
}

const items: Item[] = [
  { id: "a", title: "Кофе" },
  { id: "b", title: "Чай" },
  { id: "c", title: "Вода" }
];
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<Board items={items} />);

const rows = () =>
  Array.from(document.querySelectorAll("li"), (li) =>
    li.textContent! + (li.querySelector("input")!.value || "—"));

setTimeout(() => {
  document.querySelectorAll("input")[1].value = "с молоком";
  const tea = document.querySelectorAll("li")[1]; // узел строки «Чай» до сортировки
  // второй вызов render у того же корня — обычная перерисовка, без состояния
  root.render(<Board items={[...items].sort((a, b) => a.title.localeCompare(b.title))} />);
  setTimeout(() => {
    console.log(rows());
    console.log(document.querySelectorAll("li")[2] === tea);
  }, 50);
}, 50);

// из прошлых примеров: h, create, update, board, items и сверка по ключу
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
interface Item { id: string; title: string }
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare function board(list: Item[]): El;
declare const app: HTMLElement;
declare const items: Item[];

// MutationObserver сообщает о каждой правке детей узла; перенос — это вставка
function countInserts(list: Element): () => number {
  let count = 0;
  new MutationObserver((records) => {
    for (const r of records) count += r.addedNodes.length;
  }).observe(list, { childList: true });
  return () => count;
}

const sorted = [...items].sort((a, b) => a.title.localeCompare(b.title));

// наша сверка — в верхнем списке
const shown = board(items);
app.append(create(shown));
const ours = countInserts(app.firstElementChild!);
update(app.firstChild!, shown, board(sorted));

// React с теми же данными и тем же ключом — в нижнем
function Board({ list }: { list: Item[] }) {
  return <ul>{list.map((item) => <li key={item.id}>{item.title}: <input /></li>)}</ul>;
}
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<Board list={items} />);

setTimeout(() => {
  const theirs = countInserts(document.querySelector("#root ul")!);
  root.render(<Board list={sorted} />);
  setTimeout(() => {
    console.log("наша сверка:", ours()); // ?
    console.log("React:", theirs()); // ?
  }, 50);
}, 50);

// из прошлых примеров: create, update, board, rows и сверка по ключу
interface El { type: string; props: Record<string, string>; children: (El | string)[] }
interface Item { id: string; title: string }
declare function create(node: El | string): Node;
declare function update(dom: Node, before: El | string, after: El | string): Node;
declare function board(list: Item[]): El;
declare function rows(): string[];
declare const app: HTMLElement;

// у двух записей один и тот же id — так бывает, когда ключом берут поле,
// которое только казалось уникальным
const twins: Item[] = [{ id: "a", title: "Кофе" }, { id: "a", title: "Чай" }];

const shown = board(twins);
app.append(create(shown));
console.log(rows());

// данные не менялись — просто сверка прошла второй раз
update(app.firstChild!, shown, board(twins));
console.log(rows()); // ?

interface Item {
  id: string;
  title: string;
}

function Board({ items }: { items: Item[] }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}: <input /></li>
      ))}
    </ul>
  );
}

// договор нарушен: у двух соседей один ключ
const twins: Item[] = [{ id: "a", title: "Кофе" }, { id: "a", title: "Чай" }];
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<Board items={twins} />);

const rows = () =>
  Array.from(document.querySelectorAll("li"), (li) =>
    li.textContent! + (li.querySelector("input")!.value || "—"));

setTimeout(() => {
  document.querySelectorAll("input")[0].value = "первый";
  root.render(<Board items={twins} />);
  setTimeout(() => {
    console.log(rows());
  }, 50);
}, 50);