解决React列表渲染中'key'属性警告：Shimmer组件实践指南

理解React的Key属性

在react中，当渲染一个列表时，例如使用array.prototype.map()方法遍历数据生成一组ui元素时，react会要求列表中的每个子元素都拥有一个独特的key属性。这个key属性对于react的“调和”（reconciliation）算法至关重要。

React使用key来识别列表中哪些项被改变、添加或删除。它帮助React在更新UI时高效地识别元素，而不是重新渲染整个列表。一个稳定且唯一的key能够确保组件状态（如表单输入值、滚动位置等）在列表项重新排序或增删时得到正确维护，同时也能显著提升列表渲染的性能。如果缺少key或key不唯一，React可能无法正确追踪每个列表项，导致性能问题、不正确的UI更新或组件内部状态混乱。

常见问题：列表渲染中缺失Key属性

当开发者在React中渲染一个列表，但未给列表中的每个子元素指定唯一的key属性时，控制台通常会输出以下警告信息：

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.

这通常发生在像Shimmer组件这样的场景中，Shimmer组件常用于在数据加载时显示占位符动画。例如，以下代码片段展示了导致该警告的典型情况：

const Shimmer = () => {
  return (
    <div className="restraunt-list" >
      {Array(15)
        .fill("")
        .map((e) => (
          <div className="shimmer-card"> </div>
        ))}
    </div>
  );
};
export default Shimmer;

在这段代码中，我们创建了一个包含15个空字符串的数组，并使用map方法为每个元素渲染一个div作为Shimmer卡片。由于这些div元素都没有key属性，React无法区分它们，从而触发了警告。

解决方案：为列表项添加Key属性

解决这个警告的方法非常直接：为map方法返回的每个React元素添加一个唯一的key属性。在许多情况下，特别是当列表项本身没有稳定且唯一的ID时，可以使用map回调函数提供的第二个参数——数组索引（index）作为key。

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

const Shimmer = () => {
  return (
    <div className="restraunt-list">
      {Array(20) // 示例中数量从15调整到20，不影响key的原理
        .fill("")
        .map((e, index) => ( // 注意：这里添加了index参数
          <div key={index} className="shimmer-card"> {/* 将index作为key */}
            <img className="shimmer-image" />
            <p className="shimmer-card-heading"></p>
            <p className="shimmer-card-restaurant-name"></p>
          </div>
        ))}
    </div>
  );
};
export default Shimmer;

通过将key={index}添加到div元素上，我们为每个Shimmer卡片提供了一个唯一的标识符。对于Shimmer组件这类占位符列表，其特点是列表项通常是静态的、数量固定且不涉及排序、增删操作，因此使用index作为key是一个简单且有效的解决方案。

Picsart AI Image Generator

Picsart推出的AI图片生成器

37

查看详情

Key属性的最佳实践与注意事项

虽然使用index作为key在某些特定场景下（如Shimmer组件）是可接受的，但了解其局限性并遵循最佳实践至关重要：

1. 何时可以使用index作为key：

   • 列表是静态的且不会改变： 列表中的项目不会被添加、删除或重新排序。
   • 列表项没有唯一的ID： 数据本身不提供稳定的唯一标识符。
   • 列表的顺序永远不会改变： 如果列表项的顺序发生变化，使用index作为key会导致React无法正确识别元素，可能导致性能问题或不正确的组件状态。
   • Shimmer组件场景： Shimmer卡片通常只是一个视觉占位符，其内部没有复杂状态，且数量和顺序在渲染后是固定的，因此index是一个合适的临时key。

2. 何时不应使用index作为key：

   • 列表项的顺序可能改变： 当列表项被重新排序时，index会发生变化，导致React错误地认为不同的项是相同的，或相同的项是不同的，从而重新渲染整个子树，影响性能。
   • 列表项可能被添加、删除或过滤： 当列表项数量发生变化时，index会重新计算，导致React无法正确追踪每个项的状态。例如，如果在列表开头添加一个新项，所有后续项的index都会加1，React会尝试更新所有这些项而不是只添加新项。
   • 列表项包含可变状态（如表单输入）： 如果列表项内部有需要维护状态的组件（如带有用户输入的表单字段），使用index作为key会导致状态混乱，例如，删除中间一项后，下方项的状态会“上移”到不对应的元素上。

3. 推荐做法：使用数据本身的唯一ID：

   • 最佳实践是使用数据源中每个列表项的稳定、唯一的ID作为key。 例如，如果你的数据是来自API的商品列表，每个商品通常都有一个唯一的id。

   {products.map((product) => (
     <ProductCard key={product.id} product={product} />
   ))}

   登录后复制

   这种方式确保了即使列表项的顺序改变、被添加或删除，React也能准确地识别每个具体的列表项，从而实现最高效的UI更新和最稳定的组件状态。

总结

为React列表中的每个子元素提供一个唯一的key属性是构建高性能和稳定React应用的关键实践。它帮助React高效地进行调和，避免不必要的DOM操作，并正确维护组件状态。在像Shimmer组件这样简单的、静态的占位符列表中，使用数组索引作为key是一种可接受且方便的解决方案。然而，对于任何可能发生增删改查或重新排序的动态列表，务必使用数据本身提供的稳定且唯一的ID作为key，以确保应用的最佳性能和行为。

以上就是解决React列表渲染中'key'属性警告：Shimmer组件实践指南的详细内容，更多请关注php中文网其它相关文章！