React生成唯一随机key引发无限循环问题排查

问题背景 #

我开发了ComponentSlider组件，通过stage prop控制激活子组件的索引，实现子组件滑入滑出的包裹展示效果。为了给每个子组件包裹用于样式控制的div，需要为它们设置key prop，但由于子组件内容不确定，尝试用随机值（如uuid()）作为key时，触发了React无限重渲染甚至页面冻结。

目前只有用子组件索引作为key（key={pageSlide-${i}}）能正常运行，但这不符合React的最佳实践。

尝试过的无效方案 #

• 渲染前映射子组件并添加uuid属性，通过key={child.uuid}调用
• 生成uuid数组，通过key={uuids[i]}分配key
• 用自定义钩子将子组件存入状态并添加uuid prop

以上方法均导致相同的无限循环问题。

问题根源 #

React通过key来判断DOM元素是否可以复用：

1. 如果在渲染阶段直接生成随机key（比如在.map()里直接调用uuid()），每次组件重渲染时，所有子组件的key都会变成全新的随机值。
2. React会将这些子组件识别为全新的元素，销毁旧组件实例、重新创建新的组件实例。
3. 子组件的销毁和重建会触发一系列副作用（如useEffect执行、状态重置、DOM重新挂载）。如果你的组件中有类似updateMaxHeight这种在子组件挂载后更新父组件状态的逻辑，就会形成闭环：

   父组件重渲染→生成新随机key→销毁重建子组件→触发父组件状态更新→父组件再次重渲染
   最终导致React无限循环、页面冻结。

为什么useMemo生成uuid数组能解决问题 #

const uuids = useMemo(
    () => Array.from({ length: childComponents.length }).map(() => uuid()),
    [childComponents.length]
);
// 调用时用key={uuids[i]}

useMemo会缓存uuid数组的生成结果，只有当依赖项childComponents.length变化时才会重新生成数组。也就是说：

• 子组件数量不变时，重渲染时key保持稳定，React会复用已有子组件
• 只有子组件数量改变时，才会生成新的key，此时重建子组件是合理的
  这样就打破了无限循环的链路。

额外优化方案 #

@Nick Parsons指出：使用React.Children.map()遍历子组件时，不需要手动为包裹的div设置key——React会自动保留子组件原有的key（如果父组件已设置），并处理映射关系，从根源上避免手动设置key的问题。

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