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

Posted 2023-02-22

【中文标题】在 React 应用程序中使用 D3 渲染元素的价格？

【英文标题】：The price of rendering elements using D3 in a React application?

【发布时间】：2017-12-25 08:02:52

【问题描述】：

我正在尝试了解如何集成 D3 和 React。具体来说，我试图了解使用 D3 呈现可视化效果如何影响 React。如this excellent question and it's reply 中所述：

[...] 目前没有很好的方式来使用 React 和 D3 [...] 这是因为在 React 世界中你不直接进行 DOM 操作，但在 d3 世界中这是唯一的事情你会的。

回复继续说

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

让 D3 负责渲染对 React 有什么影响？它只会影响使用 D3 的组件的性能还是其他组件的性能？例如，是否会以某种方式使用 D3 直接操作 DOM 与 React 的虚拟 DOM？我基本上是想了解使用 D3 必须付出的代价。

【问题讨论】：

这两篇文章可能有用：medium.com/@Elijah_Meeks/…accelebrate.com/blog/…

【参考方案1】：

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

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

关键是将逻辑和事件从UI操作中分离出来，并有少量的大反应元素，而不是那么多的小元素。

它可以管理具有大约 4K 类、30fps 的 UML。

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

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

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

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

【讨论】：

感谢这个令人鼓舞的例子。我不确定我是否完全理解在您的示例中哪个组件正在执行渲染。您是说 D3 根据发送到 UMLEditor 的道具渲染所有内容吗？还是基于回调的 React 渲染？

@langkilde 我已经用更多信息编辑了答案。如果还不清楚，请告诉我。

这是一个有用的说明。我觉得它仍然没有完全回答这个问题，即在您让 D3 管理的复杂 SVG 元素之外，这会如何影响 React 的性能。例如，对虚拟 DOM 有什么影响吗？我有一个非常基本的了解，所以也许我没有正确阅读您的回复。