为何React.createPortal支持列表项式key，而<Suspense>等组件却不支持？

先搞懂：React里key到底是干嘛的 #

key是React用来识别组件/元素身份的唯一标识，核心作用就是在列表更新时帮React高效做diff——通过key，React能快速判断哪些元素是新增、删除或移动的，从而复用已有组件实例，避免不必要的重渲染或者状态丢失。

为什么React.createPortal能加key？ #

createPortal看起来是把组件渲染到DOM的另一个地方，但它本质还是React组件树的一部分。比如你要渲染一堆模态框，每个都用portal挂到页面根节点下，这时候每个模态框都是独立的组件实例，有自己的状态。

给每个portal加key，React就能精准区分每个portal对应的内容，当列表更新（比如删一个模态框、调整顺序）时，不会把A模态框的状态错给到B，也不会随便卸载重建组件，性能和体验都能保住。

举个实际写法：

{modalList.map(modal => (
  ReactDOM.createPortal(
    <Modal content={modal.content} />,
    document.getElementById('modal-root'),
    modal.id // 第三个参数就是key
  )
))}

为什么<React.Fragment>支持key？ #

Fragment就是个“无DOM包裹器”，当你用它包裹列表里的一组元素时，和给普通列表项加key是一个道理——React需要通过key识别每个Fragment对应的元素组，确保列表更新时能正确匹配，不会搞混元素的顺序或状态。

为什么<React.Suspense>不能加key？ #

Suspense是用来处理异步加载的“边界组件”——它的活儿就是在子组件（比如懒加载的组件、正在请求数据的组件）加载完之前，先显示个loading之类的fallback。

它的定位不是列表里的可复用项，而是一个“关卡”。React设计时就没给它加key属性，因为它不需要参与列表的身份识别：Suspense的行为完全由它包裹的异步内容决定，就算页面上有多个Suspense，React也是靠组件树的层级和位置来区分它们，根本不需要key。

关于你提到的文档补充 #

你说GitHub讨论显示key相关文档在2023年4月18日后新增，这也解释了为啥之前在Stack Overflow和谷歌上搜不到太多内容——之前这部分API的设计细节没写进官方文档，文档补全后才把这些逻辑明确出来。

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