时间戳

首页 > 解决方案 > hyperHTML：更新列表

javascript - hyperHTML：更新列表

问题描述

当我检查由以下代码创建的 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);

它实际上是在重新渲染整个列表吗？如果是这样，我如何仅通过呈现新更改来提高性能？这是一个有效的问题，还是我不必要地优化？

标签： javascripthyperhtml

解决方案

抱歉耽搁了（我正在度假），但答案很简单：如果你提供一个字符串数组作为插值，你就有一个不安全的、总是新的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

推荐阅读