如何在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，但这对于强制布局等问题并不适用，因为性能会很快变坏。 There is a good blog post on this package。

你会注意到几乎所有React和d3都只是图表。 Here is a good example of React and d3 using a Force Layout。但是，你会注意到即使是一个小例子也有时感觉不流畅。

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