我正在尝试了解如何集成 D3 和 React。具体来说，我试图了解使用 D3 渲染可视化效果如何影响 React。如 this excellent question and it's reply 中所述:
[...] there is currently no great way to work with React and D3 [...] this is because in the React world you don't do direct DOM manipulation, but in the d3 world that's the only thing you do.
回复继续说
It seems to me that the current consensus for Force Layouts and the like is to simply drop out of React for those components and let d3 do its thing. This isn't ideal but it's way more performant.
让 D3 负责渲染对 React 有什么影响？它只会影响使用 D3 或其他组件的组件的性能吗？例如，是否会以某种方式使用 React 的虚拟 DOM 使用 D3 螺钉直接操作 DOM？我基本上是想了解使用 D3 必须支付的价格。
最佳答案
我参与了一个项目(不幸的是私有(private)的)，我在其中使用 D3 来表示 UML 编辑器。一切都使用 SVG 操作来绘制表示 UML 的 SVG。
编辑器 UI 逻辑是在独特的 React 元素 (UMLEditor) 中使用 TypeScript 和 D3 实现的。您可以传递编辑器属性以设置 UML 中的更改，并传递回调以取回数据。例如，您可以拖放一个 UML 类(以 60fps 的速度)，但 UI 仅触发两个事件(拖放)到 React 回调。
关键是将逻辑和事件从 UI 操作中分离出来，并且有少量的大 react 元素，而不是那么多小元素。
它可以以 30fps 的速度管理包含大约 4K 类的 UML。
编辑:让我们定义一个小应用程序。 您有小 React 组件及其子元素，例如根 App 元素、导航栏、视口(viewport)等...
除 UMLEditor 之外的每个元素都对性能有很小的影响。 UMLEditor 元素是一个没有任何 React 子元素的复杂元素。其中的每个 UI 元素都是使用 D3 呈现的。 UMLEditor 的真实 DOM 包含一个完全使用 D3 管理的复杂 SVG 元素。
为了让这个元素与 React 交互，我们作为属性传递回调事件，比如拖放、创建新的 UML 类......和一个 JavaScript 类，包含所有 D3 渲染逻辑.
我们不将整个 UML 配置作为 prop 传递，因为它会对性能产生负面影响。相反，当我们出于导出目的需要它时，作为 prop 传递的 JavaScript 类可以使用方法提供整个 UML 配置。
关于javascript - 在 React 应用程序中使用 D3 渲染元素的价格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45200895/