以毫秒为间隔进行DOM更新

Question

方案：    我正在构建一个实时物联网仪表板，它将以毫秒为间隔（100毫秒）更新传感器读数。读数通过websockets进行流式传输。有一个中央redux存储，可以调度动作来更新状态。

问题：    使用少量传感器，UI可能会冻结，浏览器重新绘制可能会被阻止（不确定）。

我对浏览器基础知识进行了一些研究。请求requestAnimationFrame（rAF）和一个优秀的谈话Jake Archibald at JSConf。有一个与此相关的github问题Should React use requestAnimationFrame by default。

所以我的问题是我应该使用rAF进行毫秒dom更新还是仅仅依靠react内部来更新DOM？对我来说，毫秒精度是至关重要的，并且无法承受传感器数据发生的任何变化。

前进的方向是什么？

Answer 1

根据this Github issue，对于非交互事件，React将异步处理setState个调用。这意味着最新状态将尽快呈现。这就像你可以在浏览器中实时接近一样。

如果您尝试同步绘制每个Web套接字状态更新，则会面临背压风险。一般来说，当消费者从队列中排队的项目比生产者排队的项目更慢时，会发生背压。缓冲区随着时间的推移而累积，导致内存泄漏以及项目的原始入队时间和项目的出队时间之间的延迟增加。

ReactiveX网站有good example of back pressure - 网络套接字为Observable，而React的异步呈现类似于Sample运营商。

React的异步呈现通过在呈现时采样最新提供的状态来处理背压，这意味着尽可能快地对DOM进行更新。 React可能比尝试自己处理DOM更新更快，因为它只根据状态更改进行更新 - 它不会每次更新每个元素＆＃34; frame＆＃34;。

您可能应该信任React使用最新数据呈现ASAP，如果Web套接字消息快速发生以供UI线程处理，那么请在Web工作者中处理它们。