我正在尝试了解如何集成 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 必须付出的代价。
【问题讨论】：
标签： javascript performance reactjs d3.js data-visualization
我参与了一个项目（不幸的是，私人项目），我使用 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 配置。
【讨论】：