React Keys：在静态数组中高效使用Fragment进行列表渲染

const text = [  { player: "player1", text: "Hello", snippet: "H" },  { player: "player2", text: "World", snippet: "W" },];const renderedText = () => {  return text.map(e =>     {/* 这里的每个Fragment都是一个列表项 */}      {e.text}       {e.snippet}     {renderedText()}

上述代码会触发React的“unique key prop”警告。这是因为map函数返回的是一个Fragment数组，而每个Fragment本身都是一个列表项，因此它也需要一个key来帮助React识别。

一个常见的错误尝试是将key放置在Fragment内部的子元素上：

const renderedText = () => {  return text.map((e, index) =>          {/* 错误：key放在了Fragment内部的span上，而不是Fragment本身 */}      {e.text}       {e.snippet}     

这种做法并不能消除警告。原因是，map函数迭代的是text数组，它返回的直接是Fragment实例的列表。React需要为这个Fragment列表的每个成员分配一个key，而不是为Fragment内部的子元素。当React处理这个列表时，它看到的是一个Fragment，而不是span，所以span上的key对它来说是不可见的，无法用于列表的协调。

解决方案：将Key应用于Fragment

正确的做法是将key属性直接放置在React.Fragment上，或者其短语法>上（但需要注意，短语法...>不支持key属性，因此在这种情况下必须使用React.Fragment的完整形式）。

import React from 'react'; // 如果使用React.Fragment，需要导入Reactconst text = [  { id: 'a1', player: "player1", text: "Hello", snippet: "H" },  { id: 'b2', player: "player2", text: "World", snippet: "W" },];const renderedText = () => {  return text.map((e, index) =>    // 正确：将key应用于React.Fragment    // 优先使用数据中的稳定ID，如果不存在，再考虑使用index           {e.text}       {e.snippet}       );};// 在组件中渲染function MyComponent() {  return (    
{renderedText()}
  );}

通过将key属性直接添加到React.Fragment上，我们为map函数返回的每个Fragment实例提供了一个唯一的标识符。这样，React就能准确地识别列表中的每个Fragment及其内部的内容，从而避免警告并确保正确的协调行为。

关于Key选择的注意事项

选择一个合适的key至关重要。

优先使用稳定且唯一的ID： 最佳实践是使用数据源中每个项目固有的、稳定且唯一的ID（例如数据库ID）。如果您的text数组中的每个对象都有一个id属性，那么key={e.id}是首选。这样即使列表项的顺序发生变化、有新项插入或旧项删除，React也能准确地追踪每个项。

何时可以使用index作为Key： 虽然官方文档通常不推荐使用数组索引作为key，但在某些特定且严格的条件下，它是可以接受的：

列表和列表项是完全静态的： 列表项的顺序永远不会改变，不会有新项插入，也不会有旧项删除。列表项没有内部状态： 如果列表项是纯展示性的，没有内部状态需要保留（例如，一个简单的标签）。

在本文的问题场景中，明确指出“HTML elements I'd like to render are completely static, they are never moved nor deleted”，这正是使用index作为key的少数合理场景之一。然而，即使在这种情况下，如果数据源提供了稳定的唯一ID，也仍然强烈建议使用该ID。

Key的稳定性： key必须是稳定的，即在组件的整个生命周期中，同一个逻辑项的key不应该改变。不稳定的key会破坏React的协调机制，导致性能下降和难以调试的bug。

总结

正确使用key属性是React列表渲染的关键，它直接影响应用的性能和稳定性。当使用map函数渲染一个React.Fragment列表时，务必将key属性直接放置在React.Fragment组件上，而不是其内部的子元素。在选择key的值时，应优先使用数据中稳定唯一的ID；仅在列表完全静态且没有内部状态的特定情况下，才可考虑使用数组索引作为key。遵循这些原则将帮助您构建高效、健壮的React应用。

以上就是React Keys：在静态数组中高效使用Fragment进行列表渲染的详细内容，更多请关注创想鸟其它相关文章！