React中如何结合可变数据实现实时图表的最优性能？

近几周我泡在多款图表库的调研和测试里，重点死磕Highcharts和Chart.js，本来想挖挖它们的性能天花板，结果一路踩坑，体验有点一言难尽。这里给大家分享下我在数据处理层面踩的最大的坑：

可变 vs 不可变数据：弃用Redux的关键原因 #

我之前用Redux管理图表数据，所有数据点都以{x: sometimestamp, y: somenumber}的对象形式存在数组里。结果发现，Redux的不可变状态更新逻辑完全不适合这种场景：

• 每次新增或修改一个数据点，都得生成全新的数组/对象，哪怕只改一个y值，整个数据数组都要重新创建
• 对于包含上万条数据的实时图表来说，这种操作带来的状态同步开销和DOM重绘压力直接让页面卡顿，Chart.js帧率掉到20以下，Highcharts的渲染延迟也能明显感知到

权衡之后我直接弃用了Redux，改用可变数据模式：

• 直接对原数组里的对象进行修改（比如dataPoint.y = newValue）
• 手动调用图表的局部更新API：Highcharts用chart.series[0].update({data: updatedData}, false)然后chart.redraw()，Chart.js用chart.update('series', [{data: updatedData}], {duration: 0})
• 这么一改，性能直接起飞——大数据量下帧率稳定在50以上，卡顿感基本消失

额外的小优化点 #

除了数据处理方式，我还做了两个小调整，也帮了不少忙：

• 去掉了不必要的数据序列化：之前为了Redux持久化做了JSON序列化/解析，大数据量下这部分开销占比很高，直接去掉后初始化速度快了不少
• 精简图表配置：删掉了Highcharts里多余的tooltip格式化器、默认动画效果，Chart.js里关闭了不必要的交互监听，初始化和渲染速度都提升了30%左右

总的来说，这两款库本身的性能其实够用，很多时候性能瓶颈是我们的状态管理和数据处理方式造成的。如果你们也在做大数据量的实时图表，不妨试试绕开不可变状态的限制，直接操作数据+局部更新的方案。

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