React 列表渲染中的 Key Prop：避免警告与提升性能

理解 React 中的 key Prop

当你在 react 中渲染一个元素列表时，例如使用 array.prototype.map() 方法，react 需要一种方式来识别列表中的每个元素。这个“身份识别”机制就是 key prop。key prop 的主要作用在于：

1. 优化渲染性能： React 使用 key 来高效地更新、添加或删除列表中的项。当列表项的顺序发生变化、有新项加入或旧项被移除时，React 会根据 key 值来判断哪些 DOM 元素需要被移动、创建或销毁，而不是简单地重新渲染整个列表。这极大地提升了渲染效率。
2. 保持组件状态： 如果列表中的某个组件是有状态的（例如，包含输入框或内部状态），key 可以确保在列表更新时，该组件的实例及其状态能够正确地与底层数据项关联，避免状态混乱。
3. 避免警告： 如果不提供 key prop，React 会在控制台输出警告信息，提示开发者添加 key。例如，常见的警告是：Warning: Each child in a list should have a unique "key" prop.

常见问题场景：缺失 key Prop

在开发中，尤其是在渲染占位符（如 Shimmer Card）或简单列表时，开发者可能会忘记为列表中的子元素提供 key prop。以下是一个典型的 Shimmer Card 渲染代码片段，它会导致 React 发出警告：

import React from 'react';

const Shimmer = () => {
  return (
    <div className="restraunt-list" >
      {Array(15) // 创建一个包含15个空字符串的数组
        .fill("")
        .map((e) => ( // 遍历数组并为每个元素渲染一个 div
          <div className="shimmer-card"> </div> // 这里的 div 缺少 key prop
        ))}
    </div>
  );
};

export default Shimmer;

运行上述代码，你会在浏览器控制台看到类似的警告信息：

index.js:1 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Shimmer`. See https://reactjs.org/link/warning-keys for more information.

    at div
    at Shimmer
    at Body
    at AppLayout

这个警告明确指出 Shimmer 组件的渲染方法中，列表的每个子元素缺少唯一的 key prop。

解决方案：为列表子元素添加 key Prop

解决 key prop 警告的方法是为列表中的每个子元素提供一个唯一的 key。最直接且简单的做法是在 map 方法的回调函数中，利用第二个参数 index（当前元素的索引）作为 key。

以下是修正后的 Shimmer 组件代码：

import React from 'react';

const Shimmer = () => {
  return (
    <div className="restraunt-list">
      {Array(20) // 假设需要渲染20个 Shimmer Card
        .fill("")
        .map((e, index) => ( // 使用 map 方法的第二个参数 index 作为 key
          <div key={index} className="shimmer-card"> {/* 添加 key={index} */}
            <img className="shimmer-image" alt="Shimmer placeholder" />
            <p className="shimmer-card-heading"></p>
            <p className="shimmer-card-restaurant-name"></p>
          </div>
        ))}
    </div>
  );
};

export default Shimmer;

通过在 div 元素上添加 key={index}，我们为每个 Shimmer Card 提供了唯一的标识，从而消除了 React 的警告。

Hugging Face

Hugging Face AI开源社区

135

查看详情

key Prop 的最佳实践与注意事项

虽然使用 index 作为 key 可以解决警告，但在某些情况下它并不是最佳实践。

1. 优先使用稳定、唯一的 ID： 如果你的列表数据来源于后端或具有唯一标识符（如数据库ID、UUID），强烈建议使用这些稳定且唯一的 ID 作为 key。

   // 假设你有以下数据
   const items = [
     { id: 'a1', name: 'Item A' },
     { id: 'b2', name: 'Item B' },
     { id: 'c3', name: 'Item C' },
   ];
   
   {items.map(item => (
     <div key={item.id}>{item.name}</div> // 使用 item.id 作为 key
   ))}

   登录后复制

   这样做可以确保即使列表项的顺序发生变化、有增删操作，React 也能准确地识别每个元素，避免潜在的性能问题和组件状态错误。

2. 何时可以使用 index 作为 key： 使用 index 作为 key 是可以接受的，但仅限于以下两种情况：

   • 列表是静态的，且不会发生变化： 列表项的顺序永远不会改变，也不会有项被添加、删除或重新排序。例如，上述的 Shimmer Card 列表，它只是一个固定数量的占位符，其内部元素不会被重新排序或动态增删。
   • 列表项没有稳定的 ID： 在某些特殊情况下，你可能无法获取到稳定且唯一的 ID。

3. 避免 index 作为 key 的场景： 当列表项可能发生以下变化时，不应使用 index 作为 key：

   • 列表项的顺序可能改变： 例如，用户可以拖拽排序。
   • 列表项可能被添加或删除： 例如，一个可编辑的待办事项列表。
   • 列表项可能被过滤： 过滤操作会改变列表的长度和索引。

   在这些情况下，使用 index 作为 key 会导致 React 无法正确识别元素的变化，可能引发：

   • 性能问题： React 可能会销毁并重建整个组件，而不是只更新或移动必要的元素。
   • 状态错误： 如果列表项内部有状态（如输入框的值、复选框的选中状态），这些状态可能会错位，导致数据混乱。

总结

key prop 在 React 列表渲染中扮演着至关重要的角色，它不仅能够消除控制台的警告，更是优化应用性能和确保组件状态正确性的关键。在大多数情况下，应优先使用数据中稳定且唯一的 ID 作为 key。只有当列表完全静态且不会有任何增删改序操作时，才考虑使用 index 作为 key。理解并正确使用 key prop，是每个 React 开发者提升代码质量和应用性能的重要一步。

以上就是React 列表渲染中的 Key Prop：避免警告与提升性能的详细内容，更多请关注php中文网其它相关文章！