Javascript hyperHTML：更新列表

当我检查由以下代码创建的html元素时（在Chrome中使用），整个列表将刷新（我假设这是基于

中的所有元素）。

函数更新列表（render，mydata）{
渲染`
你好

${mydata.map（x=>`
${x}
`）
`；
}
让mylist=newarray（1000）.fill（0）.map（（）=>Math.random（））；
const render=hyperHTML.bind（document.body）；
updateList（渲染，mylist）
setTimeout（（渲染，mylist）=>{
mylist[2]=“ww”；
updateList（渲染，mylist）；
}，6000，渲染，mylist）；

它实际上是在重新呈现整个列表吗？如果是的话，我如何通过只呈现新的更改来提高性能？这是一个合理的问题，还是我进行了不必要的优化？

很抱歉延迟（我在度假）但答案很简单：如果您提供一个字符串数组作为插值，那么就相当于一个不安全且总是新的

innerHTML

操作，这两种操作都是可能的，但不建议使用

当您拥有真实世界的数据和项（通常是对象）时，您需要做的是将每个项与其表示的DOM片段关联起来

这是通过

wire（…）

完成的，它接受一个引用作为对象，还可以选择一个id

由于引用必须很弱，出于内存原因，要重新创建演示，您可以将所有项目关联到单个源，如

列表所示，并将每个项目值用作唯一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);

const{bind，wire}=hyperHTML；
函数updateList（render，mydata）{
渲染`
你好

${mydata.map(
x=>wire（mydata，':'+x）`
${x}
`
)}
`；
}
让mylist=newarray（1000）.fill（0）.map（（）=>Math.random（））；
const render=bind（document.body）；
updateList（渲染，mylist）
setTimeout（（渲染，mylist）=>{
mylist[2]=“ww”；
updateList（渲染，mylist）；
}，6000，渲染，mylist）；

您可以在此处看到上面的代码：

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);