React18 源码解析之 key 的作用。

---

在 React 中，key 是用于帮助 React 识别哪些元素发生了变化、被添加或被删除的重要属性。当你拥有一组相似的元素时，key 可以帮助 React 识别元素的唯一性，以便更高效地进行 DOM 操作。

作用：

1. 元素的身份标识： key 主要用于识别元素的身份。当元素的 key 改变时，React 将认为这是一个新的元素，而不是更新现有元素。
2. 提高更新性能： 在进行列表渲染时，React 使用 key 来跟踪列表中元素的变化。通过 key，React 可以更精确地判断哪些元素需要更新、添加或删除，从而提高渲染性能。

示例：

function MyList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

在这个例子中，key 属性被赋予了每个列表项，通常使用具有唯一标识的属性值（比如数据库中的 ID）。这样，React 就可以根据 key 来区分不同的列表项。

注意事项：

1. 唯一性： key 必须在同一级别的兄弟元素之间保持唯一。不同层级的 key 可以重复。
2. 稳定性： 尽量使用稳定的、不变的标识符作为 key。避免使用数组索引作为 key，因为它可能导致渲染错误。
3. 不推荐使用随机数： 不要使用随机数作为 key，因为这会导致在组件更新时出现不稳定的效果，可能导致不必要的重新渲染。

使用 key 时要注意以上事项，以确保 React 能够正确地跟踪元素的变化，提高渲染性能。

---

原文链接：codingdict.net

---