1

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

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

4

1 回答 1

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

于 2018-08-24T23:04:03.370 回答