javascript如何实现列表渲染_ key属性为什么重要

admin 百科 2025-12-17 14

JavaScript列表渲染需用key标识元素身份以保障高效更新，原生JS无key机制导致重绘丢失状态，React等框架要求唯一、稳定、可预测的key（如id）而非index，否则引发错误复用和性能问题。

javascript如何实现列表渲染_ key属性为什么重要-第1张图片-佛山资讯网

JavaScript 实现列表渲染，核心是把数组数据映射为 DOM 元素（或 React/Vue 等框架中的虚拟节点），而 key 是保证更新过程高效、正确的重要标识。

原生 JavaScript 列表渲染：用 forEach 或 map + innerHTML/appendChild

没有框架时，常见做法是遍历数组，拼接 HTML 字符串或创建元素插入容器：

const list = ['苹果', '香蕉', '橙子'];
const container = document.getElementById('list');

// 方式1：拼接字符串（简单但注意 XSS）
container.innerHTML = list.map((item, index) => 
  `<li data-index="${index}">${item}</li>`
).join('');

// 方式2：创建元素（更安全、可控）
list.forEach((item, index) => {
  const li = document.createElement('li');
  li.textContent = item;
  li.dataset.index = index;
  container.appendChild(li);
});

登录后复制

这种方式能显示列表，但没有 key 的概念，也没有智能更新逻辑——每次数据变，通常要清空重渲，性能差且丢失状态（比如 input 输入框焦点）。