React中map与reduce生成的Fragment是否需设置key？如何设置？

1. map生成的Fragment需要加key #

你用map返回的是一个Fragment数组，React要求列表里的每个元素都得有唯一key，哪怕是Fragment。控制台没报错可能是开发模式下的检测没触发（比如元素是纯文本且没发生重排序），但规范上必须加，不然后续如果列表内容变化、重排序，可能出现渲染异常或性能问题。

注意：短语法的<>没法加key，得换成完整的<React.Fragment>（或者单独导入Fragment组件）才能设置key。

2. reduce里的Fragment不需要加key #

你的reduce是把数组合并成一个单个的大Fragment，最终返回的不是列表数组，而是单个React节点，这种情况不需要加key——key只针对列表中的多个元素。

3. 该用什么当key？ #

如果split后的每个item字符串是唯一的，直接用item当key就行。但如果存在重复的item（比如原字符串是"aaa"，用"a"split后得到["", "", "", ""]），纯item就不唯一了，这时候可以：

• 退而求其次用index：虽然React不推荐用索引当key，但如果你的列表是静态的（不会新增、删除、重排序），用索引也不会有问题；
• 生成唯一标识：比如结合item和index，用${item}-${index}当key，保证唯一性；
• 更严谨的方式：不用split，改用正则匹配来获取每个片段的位置信息，用片段在原字符串中的起始索引当key，示例代码如下：

  // 用正则分割并记录每个片段的起始位置
  const parts = [];
  let lastIndex = 0;
  const regex = new RegExp(searchTerm, 'g');
  let match;
  while ((match = regex.exec(children)) !== null) {
    parts.push({
      text: children.slice(lastIndex, match.index),
      key: lastIndex // 用起始位置作为唯一key
    });
    lastIndex = regex.lastIndex;
  }
  parts.push({
    text: children.slice(lastIndex),
    key: lastIndex
  });
  
  // 后续map时使用这个key
  {parts.map(({text, key}) => (
    <React.Fragment key={key}>{text}</React.Fragment>
  )).reduce(...)}
  

内容的提问来源于stack exchange，提问作者user3146945