React 和 Vue 中的 key 详解：解锁高效列表渲染

前端

2023-12-04 04:19:29

React 和 Vue 中 key 的作用

在 React 和 Vue 等基于虚拟 DOM 的框架中，key 是列表渲染的关键属性。它为每个列表项分配一个唯一的标识符，以便框架在执行差异算法时跟踪和比较元素。

差异算法是一种高效的技术，用于确定哪些 DOM 元素需要更新或移除。通过使用 key，框架可以准确地识别发生变化的元素，并仅更新必要的元素，从而提高性能并减少不必要的重新渲染。

key 的最佳实践

1. 使用唯一值

key 应该是每个列表项的唯一标识符。这可以是字符串、数字或对象的组合。避免使用索引或随机值作为 key，因为这些值可能会随着时间的推移而改变，导致差异算法不准确。

2. 在列表项创建时设置 key

key 应该在列表项创建时设置，而不是在组件更新时。这有助于避免 key 发生不必要的更改，从而提高性能。

3. key 应稳定

key 应该在整个组件的生命周期中保持稳定。避免使用动态或计算值作为 key，因为这些值可能会随着时间的推移而改变，导致不必要的重新渲染。

具体示例

React

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const ItemList = () => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>