Electron + React 渲染大量列表CPU占比过高，不适用虚拟滚动/分页的解决方案问询

1. React 渲染层优化 #

• 列表渲染的key属性使用每条数据的唯一业务ID，不要用数组索引，避免列表顺序变化、增删数据时触发不必要的DOM重建。
• 给 Item 组件包裹 React.memo，同时传入自定义比较函数，仅对比组件实际依赖的item字段，避免全量对象比对失效。如果是类组件则改用PureComponent或自定义shouldComponentUpdate生命周期。
• 父组件传递给Item的所有回调函数，统一用useCallback包裹，避免每次父组件渲染生成新的函数实例，导致memo拦截重渲染失效。
• 提前预处理列表数据：把列表项需要的格式化、计算逻辑（比如时间格式化、状态判定）提前在数据请求阶段处理完成并挂载到item对应字段，不要在Item渲染时实时计算。
• 如果列表数据存在全局状态管理中，使用状态库的选择器API仅订阅列表渲染必需的字段，避免其他不相关的状态更新触发列表重渲染。

2. DOM 与渲染性能优化 #

• 简化列表项DOM结构：移除不必要的嵌套节点，减少单个Item的DOM节点数量，400条数据叠加后总DOM节点数会大幅降低。
• 优化列表相关CSS：移除列表、列表项上的box-shadow、filter、复杂渐变等会触发高频重绘的属性；给列表容器添加will-change: scroll-position提示浏览器提前做滚动优化。
• 列表项资源懒加载：如果Item包含图片、视频等媒体资源，启用懒加载，仅当元素进入可视区域后再加载资源，Electron环境可直接用原生loading="lazy"属性实现。
• 高频事件防抖节流：如果列表项绑定了scroll、mousemove、mouseenter等高频触发事件，所有事件回调都添加防抖/节流逻辑，避免滚动时频繁触发执行。

3. 展开交互专属优化 #

• 折叠内容按需渲染：默认状态下仅渲染列表项折叠状态的可见内容，用户点击展开时再动态插入展开区域的DOM，不要默认全量渲染所有折叠态的隐藏内容。
• 展开状态本地化：把单条列表的展开状态存在Item内部状态，不要提升到父组件/全局store，避免单条展开触发全量列表重渲染。

4. Electron 专属优化 #

• 确认硬件加速已开启：检查主进程代码，移除app.disableHardwareAcceleration()配置，确保Chromium内核的硬件加速生效，大幅降低滚动时的CPU占用。
• 升级Electron版本：如果当前使用的是低于15的老旧版本，升级到最新LTS稳定版，Chromium内核的渲染性能有非常明显的优化。
• 禁用生产环境调试工具：生产打包时移除所有调试工具、React DevTools等注入的扩展，避免额外的性能开销。

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