玩转React Key，轻松搞定八股文面试问题

2022-11-29 10:09:33

React Key：掌握基础，打造顺滑用户体验

React Key 是什么？

在 React 的世界里，Key 是一个至关重要的概念，它就像一个身份标识，用于区分列表中的每一项。当列表中的数据发生变化时，React 会通过 Key 来判定哪些项被添加、删除或更新。如果没有明确指定 Key，React 会默认使用数组的索引作为 Key，这可能会导致一些意外情况，例如列表项顺序错乱或组件状态丢失。

React Key 的原理

React Key 是一个唯一的字符串，可以是任意字符串，但通常建议使用与数据相关的字符串，比如数据的 ID。当列表中的数据发生变化时，React 会通过 Key 来确定哪些项被添加、删除或更新。如果一项的 Key 没有变化，React 会认为这是一项更新，并保留它的状态。如果一项的 Key 发生了变化，React 会认为这是一项新的项，并创建一个新的组件。

React Key 的作用

React Key 主要有以下几个作用：

提高性能： 通过 Key，React 可以快速确定哪些项被添加、删除或更新，从而提高渲染性能。
避免列表项顺序错乱： 如果没有指定 Key，当列表中的数据发生变化时，React 可能会根据数组的索引来重新渲染列表项，这可能会导致列表项顺序错乱。
保留组件状态： 如果没有指定 Key，当列表中的数据发生变化时，React 可能会销毁旧的组件并创建新的组件，这会导致组件状态丢失。

React Key 的使用场景

React Key 通常用于以下场景：

列表渲染： 当我们需要渲染一个列表时，需要为列表中的每一项指定一个 Key。
条件渲染： 当我们需要根据某些条件来渲染列表项时，需要为列表中的每一项指定一个 Key。
动态列表： 当列表中的数据是动态变化时，需要为列表中的每一项指定一个 Key。

React Key 的最佳实践

在使用 React Key 时，需要注意以下几点：

唯一性： Key 必须是唯一的，不能重复。
稳定性： Key 应该尽可能稳定，避免频繁变化。
相关性： Key 应该与数据相关，以便于 React 识别。

代码示例

import React from "react";

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