hyperHTML:更新列表

Question

当我检查以下代码(在Chrome中使用hyperHTML )创建的html元素时，整个列表都会刷新(我假设这是基于<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(...)完成的，它接受一个引用，作为object，以及一个可选的id。

由于引用必须是弱的，出于内存原因，为了重新创建演示，您可以像list一样将所有项关联到单个源，并使用每个项值作为唯一的id。

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