reactjs - 如何在 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使用 Shadow DOM 来执行 d3 计算和简单的 DOM 操作，然后将其渲染到 React，但这对于像 Force Layouts 这样的东西来说效果不佳，因为性能很快就会变差。 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，但我还没有看到针对 Force Layout 的好的解决方案。