React性能最佳实践：10行用户表格两种模态框方案的性能对比

一、性能对比：方案二更优 #

• 方案一（每行一个模态框）：哪怕Chakra UI Modal在isOpen为false时会从DOM移除，初始渲染10行数据时，还是会触发10次模态框组件的初始化逻辑（比如内部状态初始化、副作用执行）。虽然DOM里看不到这些模态框，但组件实例的创建与销毁会带来额外性能开销，当表格行数增多（比如到几十上百行）时，这种开销会被明显放大。
• 方案二（全局单模态框）：只存在一个模态框实例，不管表格有多少行，都只会初始化一次。打开时通过Redux传入目标userId即可，完全避免了大量重复组件实例的创建，在内存占用和渲染效率上都更高效，尤其适合数据量较大的场景。

二、关于Chakra UI Modal在isOpen=false时移除DOM的说明 #

这是Chakra UI Modal的默认设计，目的是优化DOM结构，减少不必要的DOM节点，避免潜在的无障碍访问问题（比如隐藏的模态框被屏幕阅读器误识别），同时降低页面整体的DOM节点数量。如果需要让模态框始终保留在DOM中，可以通过设置keepMounted属性为true来修改这个行为：

<Modal isOpen={isOpen} onClose={onClose} keepMounted={true}>
  {/* 模态框内容 */}
</Modal>

需要注意的是，开启keepMounted后，即使模态框隐藏，它的DOM节点会一直存在，可能会带来微小的内存占用增加，一般场景下影响可以忽略。

内容的提问来源于stack exchange，提问作者E C I N