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

Question

我试图了解如何集成D3和React.具体来说,我试图了解如何使用D3渲染可视化对React的影响.正如这个优秀的问题所解释的那样:

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

答复继续说

在我看来,目前对Force Layouts等的共识是简单地退出React以获取这些组件并让d3做其事.这不是理想的,但它的性能更高.

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

Answer 1

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

编辑器 UI 逻辑是使用 TypeScript 和 D3 在独特的 React 元素(UMLEditor) 中实现的。您可以传递编辑器属性来设置 UML 中的更改，并传递回调来取回数据。例如，您可以拖放一个 UML 类（以 60fps 的速度），但 UI 只会触发两个事件（拖放）到 React 回调。

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

它可以以 30fps 的速度管理大约 4K 类的 UML。

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

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

为了使该元素与 React 交互，我们将诸如拖放、创建新的 UML 类之类的事件的回调作为props传递......以及一个具有所有 D3 渲染逻辑的 JavaScript 类。

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