剖析React中key的奥秘：揭秘性能优化与正确使用指南

前端

2023-09-28 22:57:50

React 中 Key 的奥秘：提升列表性能的关键

在 React 应用中，key 属性扮演着举足轻重的角色。它是一把双刃剑，使用得当，可以大幅提升应用性能；但若使用不当，不仅会损害性能，还会导致意想不到的错误。

一、了解 React 的 Diffing 算法

为了充分了解 key 的作用，我们首先要了解 React 的 Diffing 算法。当 React 对比两颗树时，首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态。

比对不同类型的元素

当根节点为不同类型的元素时，React 会拆卸原有的树并创建一颗新的树。在这个过程中，原有树的所有子元素都会被销毁，新的树的所有子元素都会被创建。这种方式虽然简单，但效率低下，因为即使只有根节点发生改变，整个树都会被重绘。

比对相同类型的元素

当根节点为相同类型的元素时，React 会比较两个根节点的属性。如果属性不同，则 React 会更新根节点的属性，不会销毁和创建新的根节点。这个过程相对高效，因为只有根节点的属性发生了改变，子元素不会受到影响。

key 的介入

如果两个相同类型的根节点具有相同的属性，React 将无法分辨哪个是旧的，哪个是新的。在这种情况下，React 会销毁原有的根节点并创建新的根节点，子元素也会被销毁和创建。为了解决这个问题，需要使用 key 来唯一标识元素。

二、key 的正确使用指南

唯一性

key 必须是唯一的，即同一个列表中，每个元素的 key 必须不同。如果 key 不唯一，可能会导致意想不到的错误。

const list = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Mary' },
  { id: 3, name: 'Bob' }
];

稳定性

key 应该是稳定的，即同一个元素在整个生命周期中，它的 key 不应该改变。如果 key 不稳定，可能会导致元素在列表中跳来跳去，甚至消失。

// 错误示例：key 使用了随机数，会发生改变
const list = [
  { id: 1, name: 'John', key: Math.random() },
  { id: 2, name: 'Mary', key: Math.random() },
  { id: 3, name: 'Bob', key: Math.random() }
];

简单性

key 应该简单易懂，便于理解和记忆。建议使用字符串或数字作为 key，避免使用复杂的对象或函数。

const list = [
  { id: 1, name: 'John', key: 'John' },
  { id: 2, name: 'Mary', key: 'Mary' },
  { id: 3, name: 'Bob', key: 'Bob' }
];

性能考虑

key 的生成应该尽可能高效，避免对性能造成影响。如果 key 的生成过于复杂，可能会导致列表性能下降。

特殊情况

在某些情况下，可能会出现无法为元素指定唯一 key 的情况。例如，列表中的元素是动态生成的，无法提前知道它们的具体内容。在这种情况下，可以使用随机数或时间戳作为 key。

三、key 的优化技巧

使用索引作为 key

如果列表中的元素是按顺序排列的，可以使用索引作为 key。索引是唯一的，而且生成简单，不会影响性能。

const list = [
  { id: 1, name: 'John', key: 0 },
  { id: 2, name: 'Mary', key: 1 },
  { id: 3, name: 'Bob', key: 2 }
];

使用唯一标识符作为 key

如果列表中的元素具有唯一的标识符，可以使用标识符作为 key。这种方式可以确保 key 的唯一性，而且不需要额外生成 key。

const list = [
  { id: 1, name: 'John', key: 1 },
  { id: 2, name: 'Mary', key: 2 },
  { id: 3, name: 'Bob', key: 3 }
];

使用哈希函数生成 key

如果列表中的元素没有唯一的标识符，可以使用哈希函数生成 key。哈希函数可以将任意数据转换成一个唯一的值，而且生成速度快，不会影响性能。

const list = [
  { name: 'John', key: hashCode(name) },
  { name: 'Mary', key: hashCode(name) },
  { name: 'Bob', key: hashCode(name) }
];

function hashCode(string) {
  let hash = 0;
  for (let i = 0; i < string.length; i++) {
    hash = (hash << 5) - hash + string.charCodeAt(i);
    hash = hash & hash;
  }
  return hash;
}