javascript - hyperHTML:更新列表

Question

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