React中的高频实时数据处理：从环形缓冲区到OffscreenCanvas
内容提要
React处理高频数据流（如每秒数千点）时性能不足，需将数据存储于React外部（如环形缓冲区），分离UI形状与数据值，利用Web Workers、SharedArrayBuffer和OffscreenCanvas将重活移出主线程，并通过降采样、内存优化及调度策略，实现多核并行渲染，保持流畅帧率。
延伸解读
核心思路：把数据移出React
文章强调，高频数据流不应直接进入React状态，因为每次setState都会触发渲染，导致性能瓶颈。正确做法是将数据存储在React外部的环形缓冲区中，React只负责UI形状的变化，而数据值通过requestAnimationFrame循环读取。这种分离让React专注于低频的UI更新，而高频数据由外部存储和绘制循环处理，从而保持流畅性能。
多线程架构的实践价值
文章展示了如何利用Web Workers、SharedArrayBuffer和OffscreenCanvas将重活移出主线程，实现多核并行。通过将数据解析、降采样和绘制分别放在不同线程，主线程几乎空闲，从而保证60fps甚至144fps的流畅体验。这种架构在EEG等高频场景中效果显著，但需要权衡代码复杂度和调试难度。
降采样与内存优化
文章指出，绘制时应对数据进行降采样，例如使用min-max方法，每个像素列只绘制最小值和最大值，大幅减少绘制工作量。同时，使用类型化数组和环形缓冲区限制内存增长，避免GC压力。这些优化是实时可视化中提升性能的关键，但常被忽视。
跨域隔离的代价
使用SharedArrayBuffer需要页面启用跨域隔离（COOP/COEP），这会限制第三方资源的嵌入，如CDN图片或YouTube视频。对于依赖第三方服务的Web应用，这可能是一个障碍。文章建议，在Electron应用中更容易启用这些头，而浏览器应用需权衡性能提升与功能损失。
Q&A
React处理高频实时数据时性能不足的根本原因是什么？
React处理高频数据流（如每秒数千点）时性能不足的根本原因是：React的渲染机制不适合高频更新，每次状态更新都会触发组件重新渲染，导致大量渲染开销；同时，React应用通常只使用主线程，而主线程还要处理DOM、布局和绘制，无法充分利用多核CPU。
如何将数据存储从React状态中分离出来？
将数据存储在React外部，例如使用环形缓冲区（ring buffer）和类型化数组（如Float32Array），而不是放在React状态中。环形缓冲区提供常数时间插入和有界内存，React不订阅数据变化，因此高频数据更新不会触发React渲染。
什么是OffscreenCanvas？它如何帮助提升实时渲染性能？
OffscreenCanvas是浏览器提供的一种Canvas，可以转移到Web Worker中，在Worker线程中进行绘制，从而将渲染工作移出主线程。这样主线程可以专注于处理用户交互，而Worker线程负责绘制，避免主线程过载，提升实时渲染性能。
在React中处理高频数据时，如何利用Web Workers和SharedArrayBuffer？
可以使用Web Workers将数据处理（如解析、过滤、降采样）移到后台线程，避免阻塞主线程。SharedArrayBuffer允许主线程和Worker线程共享同一块内存，配合Atomics进行同步，实现高效的数据传递，减少复制开销。
为什么在绘制高频数据时需要进行降采样（decimation）？
因为屏幕像素有限，例如1200像素宽的画布最多显示1200个不同的X位置，如果数据点远多于像素，绘制所有点会浪费大量计算资源。降采样（如min-max模式）为每个像素列选择代表点，在保持视觉形状的同时大幅减少绘制工作量，是实时可视化中最大的CPU性能优化。
在React中集成高性能图表库（如uPlot）时，推荐的做法是什么？
推荐使用React管理图表的生命周期（挂载和卸载），而让图表库自身处理数据更新。具体做法是在useEffect中实例化图表，通过调用setData方法进行命令式更新，避免React重新渲染。这样既利用了React的组件化优势，又保证了图表的高性能。
使用SharedArrayBuffer需要满足什么条件？
使用SharedArrayBuffer需要页面启用跨域隔离（cross-origin isolation），即服务器必须设置两个HTTP头：Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp。否则SharedArrayBuffer在浏览器中不可用。
在实时数据应用中，如何保持内存稳定？
保持内存稳定的三个规则：1. 使用类型化数组（如Float32Array）存储数值数据，减少内存占用和GC压力；2. 限制所有数据结构的大小，使用环形缓冲区而不是无限增长的数组；3. 复用缓冲区，避免每帧分配新数组。
