减少 DOM 更新香草 JS

Question

我想在单击按钮时动态获取并显示一个列表。 我有这段代码：

 document.getElementById('button').addEventListener('click', (e) => { const arr = ['item1', 'item2', 'item3']; const outputContainer = document.getElementById('output'); while (outputContainer.firstChild) { outputContainer.removeChild(outputContainer.lastChild); } arr.map((el) => { const listItem = document.createElement('li'); const txt = document.createTextNode(el); listItem.appendChild(txt); outputContainer.appendChild(listItem); }) })

 <button id="button">Get list</button> <ul id="output" />

但是每次我点击按钮时，整个 ul 元素都会重新呈现，尽管它的内容没有改变。 有什么方法可以使用 vanilla JS 以某种方式重写此代码以避免不必要的 DOM 更新？ PS：每次列表都可能不同，因为它将来自 API

Answer 1

如果您需要在每次单击按钮时覆盖列表项，您可以使用Element.replaceChildren()方法（ MDN 文档）。

它为您省去了在添加新子项之前必须手动删除每个子项的麻烦。

我重写了你的一些代码，但逻辑是一样的。 请注意您不再需要 while 循环了。

据我所知，UL 仍将重新呈现，因为您正在更新（替换）它的孩子。 您可以在上一个和下一个列表元素之间进行比较，如果两个列表包含相同的数据，则提前停止 function，从而防止不必要的渲染。

 // get the output UL element const outputContainer = document.getElementById("output"); const onButtonClick = () => { const arr = ["item1", "item2", "item3"]; // use of element.replaceChildren() to clear the list and append new items outputContainer.replaceChildren(...arr.map((listItemText) => { const listItem = document.createElement("li"); listItem.textContent = listItemText; return listItem; }) ); }; document.getElementById("button").addEventListener("click", onButtonClick);

 <button id="button">Get list</button> <ul id="output" />