如何在React中处理来自D3的大量DOM操作以利用其virtualDOM

Question

所有:

我对React很新.很多帖子都在谈论React的性能virtualDOM,但我想我还没有完全理解它,我有点想知道如何在数据可视化领域(特别是用lib作为D3.js)利用这一点,几乎所有操作都在数据可视化是修改导致DOM相关操作的数据,如样式改变或元素更新次数.

例如,假设我需要构建一个折线图来显示时间序列数据,每当我选择另一个数据集时,该行需要重新计算和绘制或添加一行,我不知道在这种情况下,React virtualDOM如何显示出比D3 + Angular更好的性能(我只是试着了解virtualDOM的哪个部分在这种情况下提高了性能,或者在真正的DOM操作中哪个部分最耗时)？

谢谢

Answer 1

目前没有很好的方法可以使用React和D3.正如你似乎已经抓住了,这是因为在React世界中你没有直接进行DOM操作,但是在d3世界中你唯一能做的就是这样做.在很多方面,如果您考虑d3.selection.data函数的工作原理,整个d3库都是围绕直接DOM操作构建的.有许多库在使用D3的数学功能时运行良好,但没有一个具有流畅(并且具有良好性能)的混合React与d3动画.(就此而言,React中的动画一般都很痛苦.)

一些起点:

1. react-d3非常适合使用React绘制简单的图表.还有一个类似的包,react-d3-basic.
2. react-faux-dom使用影子DOM来执行d3计算和简单的DOM操作,然后将其渲染到React,但这对于强制布局等问题并不适用,因为性能会很快变坏.这个包上有一篇很好的博客文章.

您会注意到,几乎所有React和d3都基本上只是图表.这是使用强制布局的React和d3的一个很好的例子.但是,你会注意到,即使是一个小例子有时候也感觉不到流动.

在我看来,目前对Force Layouts等的共识是简单地退出React以获取这些组件并让d3做其事.这不是理想的,但它的性能更高.我知道有些人也正在研究使用react-art来组合React和d3,但我还没有看到一个很好的解决方案.