在React应用程序中使用D3渲染元素的价格？

Question

我正在努力了解如何整合D3和React。具体来说，我试图了解如何使用D3渲染可视化对React的影响。如this excellent question and it's reply中所述：

  

[...]目前没有很好的方法可以使用React和D3 [...]这是因为在React世界中你不做直接的DOM操作，但是在d3世界中这是唯一的东西你这样做。

答复继续说

  

在我看来，目前对部队布局的共识和   就像是简单地退出那些组件的React并让d3这样做   它的东西。这不是理想的，但它的性能更高。

让D3处理渲染对React有什么影响？它是否只会影响使用D3或其他组件的组件的性能？例如，可以用某种方式使用D3螺丝和React的虚拟DOM直接操作DOM吗？我基本上试图了解使用D3需要支付的价格。

Answer 1

我参与了一个项目（不幸的是私有），我使用D3代表一个UML编辑器。一切都使用SVG操作来绘制代表UML的SVG。

使用TypeScript和D3，编辑器UI逻辑在唯一的React元素（UMLEditor）中实现。您可以传递编辑器属性来设置UML中的更改，并通过回调来获取数据。例如，您可以拖放UML类（以60fps为单位），但UI仅触发两个事件（拖放）到React回调。

键是将逻辑和事件与UI操作分开，并且有少量大反应元素，而不是那么多小元素。

它可以在30fps内管理大约4K类的UML。

编辑：让我们定义一个小应用程序。 您有 small 对其子项做出反应的组件，例如根App元素，导航栏，视口等......

除UMLEditor之外的每个元素对性能的影响都很小。 UMLEditor元素是一个没有任何React子元素的复杂元素。其中的每个UI元素都使用D3渲染。 UMLEditor的真实DOM包含一个完全使用D3管理的复杂SVG元素。

为了使这个元素与React交互，我们传递作为道具回调事件，例如拖放，创建新的UML类......以及一个带有所有D3渲染逻辑的 JavaScript类

我们不传递整个UML配置，因为它会对性能产生负面影响。相反，当我们需要它用于导出时，作为prop传递的JavaScript类可以使用方法提供整个UML配置。