当我检查由以下代码创建的 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);
它实际上是在重新渲染整个列表吗?如果是这样,我如何仅通过呈现新更改来提高性能?这是一个有效的问题,还是我不必要地优化?