React中如何优化大量元素渲染性能？（大表格生成场景）

• 优先减少DOM操作频次
  绝大多数性能损耗都来自频繁的DOM插入触发的重排重绘，不要循环生成单个单元格/列就直接插入到页面容器中：
  1. 可以用DocumentFragment临时承载所有生成的DOM节点，全部生成完成后再一次性插入到页面，仅触发1次重排
  2. 如果内容无XSS风险，也可以先把所有单元格、列的HTML拼接为完整字符串，最后一次性赋值给容器的innerHTML，性能比逐个创建DOM节点更高
• 优化楼层数组生成逻辑
  你目前的for循环性能已经属于第一梯队，如果想要更简洁的写法可以替换为：

  const floors = Array.from({length: section.floorQuantity}, (_, i) => i + 1)
  

  该写法性能和手动push接近，比Array.fill后再map的写法性能更高
• 超大数据量下启用虚拟滚动
  如果楼层数量超过50层、或者日期跨度超过1个月，全量渲染DOM节点本身就会造成卡顿，此时可以改用虚拟滚动方案：只渲染可视区域范围内的单元格，滚动时动态更新节点内容，常驻DOM节点数量可以控制在几十的量级，不受总数据量影响
• 规避强制同步布局
  生成节点过程中不要频繁读取offsetWidth、clientHeight这类会触发即时样式计算的属性，所有单元格样式提前通过CSS类定义，生成节点时直接绑定类名即可，不要动态设置零散样式

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