hyperHTML: обновление списка

Question

Когда я проверяю элементы html, созданные с помощью следующего кода (используя hyperHTML в Chrome, весь список обновляется (я предполагаю, что это основано на всех элементах в <ul> мигает фиолетовым на короткое время).

function updateList(render, mydata) {
  render`
    <h1>hi</h1>
    <ul>
      ${mydata.map(x => `<li>${x}</li>`)}
    </ul>`;
}
let mylist= new Array(1000).fill(0).map(() => Math.random());
const render = hyperHTML.bind(document.body);
updateList(render, mylist)
setTimeout((render, mylist) => {
  mylist[2] = "ww";
  updateList(render, mylist);
}, 6000, render, mylist);

Это действительно рендеринг всего списка? Если так, как я мог улучшить производительность, только представляя новое изменение? Это действительная проблема, или я излишне оптимизирую?

Answer 1

Извините за задержку (я был в отпуске), но ответ прост: если вы предоставляете, в качестве интерполяции, массив строк, у вас есть эквивалент небезопасного и всегда нового, innerHTML операция, которая возможна, но не предлагается.

Что вам нужно сделать, когда у вас есть данные и элементы реального мира, обычно как объекты, это связать каждый элемент с частью DOM, которую он представляет.

Это сделано с wire(...) который принимает ссылку, как объект, и, необязательно, идентификатор.

Поскольку ссылка должна быть слабой, по соображениям памяти, чтобы воссоздать вашу демонстрацию, вы можете связать все элементы с одним источником как list может быть, и использовать каждое значение элемента в качестве уникального идентификатора.

const {bind, wire} = hyperHTML;
function updateList(render, mydata) {
  render`
    <h1>hi</h1>
    <ul>
      ${mydata.map(
        x => wire(mydata, ':' + x)`<li>${x}</li>`
      )}
    </ul>`;
}
let mylist= new Array(1000).fill(0).map(() => Math.random());
const render = bind(document.body);
updateList(render, mylist)
setTimeout((render, mylist) => {
  mylist[2] = "ww";
  updateList(render, mylist);
}, 6000, render, mylist);

Вы можете увидеть выше код, работающий здесь: https://codepen.io/WebReflection/pen/wEMWGv?editors=0010