Fluent UI DetailsList的setkey属性设置及选中状态留存咨询

一、setKey 该选固定字符串还是结合 Items 唯一标识？ #

• 千万别用固定字符串：如果父组件多处复用，每个实例的setKey都设成同一个固定值（比如'details-list'），不同实例的选中状态会直接互相干扰。Fluent UI 内部是靠setKey区分不同 DetailsList 实例的状态存储容器的，相同setKey会共享同一状态池，复用的组件实例会互相覆盖选中信息，必出 bug。
• 必须结合 Items 的唯一标识：最优方案是用和当前 items 集合强关联的唯一值作为setKey。比如：
  • 如果 items 是某类业务数据列表，可用数据类型标识+数据源唯一 ID（比如'user-list-' + currentTeamId、'order-list-' + batchId）；
  • 如果没有明确的业务 ID，也可以基于 items 数组生成哈希值（比如将 items 转成 JSON 字符串后取哈希），确保不同的 items 集合对应不同的setKey，同一 items 集合复用同一setKey。
    这样既能保证同一实例在重渲染时保留选中状态，又能彻底避免不同复用实例之间的状态串味。

二、除 setKey 外，还有哪些维持选中状态的方式？ #

• 手动接管选中状态：在父组件中自己维护选中项的 ID 集合，通过 DetailsList 的selectedItems和onSelectionChanged props 完全掌控状态。示例代码：

  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const selectedItems = items.filter(item => selectedIds.includes(item.id));
  
  const handleSelectionChange = (_, props) => {
    const newSelectedIds = props.selectedItems?.map(item => item.id) || [];
    setSelectedIds(newSelectedIds);
  };
  
  <DetailsList
    items={items}
    selectedItems={selectedItems}
    onSelectionChanged={handleSelectionChange}
  />
  

  这种方式最灵活，完全不受组件重渲染或复用的影响，所有选中状态都由你自己控制，适合复杂业务场景或需要跨组件同步选中状态的情况。
• 优化父组件重渲染：如果父组件的重渲染是无意义的（比如 props 未变化却触发重渲染），可以用React.memo包裹父组件，减少不必要的重渲染，从根源上避免选中状态丢失。但这种方式只能解决非必要重渲染的问题，如果是 items 更新等必要重渲染，还是需要结合上面的手动管理方案。

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