关于React和React-Native的复杂图形和图表

Question

我将开始一个新的项目，将需要自定义图表和图形。我将为存储在云中的大量数据构建特殊的趋势、分析和甘特图。

在过去我使用的是D3/拉斐尔/蚂蚁+ JQuery，但现在我正在移动和反应。据我所知，svg任务是作为HTML标记的DOM标记，所以我的第一印象是React会正常处理它。我还听说过Tiny SVG，它是用于移动的SVG的一个子集，所以我对此表示怀疑：

a) React和React Native可以很好地使用SVG吗？使用它有什么限制吗？

b) 2013年推出的小型SVG规范应该是什么？

c)在较老的浏览器中，通常不支持SVG。在桌面应用程序中，我使用了Raphael和javascript，但是React和React Native又是什么呢？

d) React和React Native是否支持D3进行数据操作？

e)在React和React原生环境中是否支持拉斐尔？

f)在React和React原生环境中是否支持Ant？

g)应用程序的性能如何，在堆栈D3，拉斐尔或蚂蚁的情况下，反应或反应原生，特别是在移动环境？

如果有用于React或React Native的最佳实践或所需的堆栈，我很乐意听到。

Answer 1

a)是的，React和React-native使用SVG非常高效。React-Native有自己的艺术库，你可以导入它来创建图形，但它仍在开发中。

b)在React和React Native中，一切都是组件。所以使用小型SVG不是一个很好的主意。

c)生成SVG有很多可能的选择。您可以从react-native本身导入艺术，但正如我提到的，它仍处于开发阶段，我最喜欢的是'react-native-svg‘。易于使用且维护良好的包。

d)可以，两者都支持D3。但不是原始的D3，因为它缺少组件系统。您需要改用react-d3，因为它已经实现了组件。它是用于从头开始操作图表的最强大和可定制的库之一。对于实现，您可以查看我的react-native项目here，其中我同时使用了reat-native-svg和react-d3。

e) react-raphael是可用的。

f)支持Ant。看一下“Ant Design of React”。

g)我没有用过拉斐尔或Ant，但我可以向你保证，react-d3在本地环境下工作得很好！

Answer 2

a)有其局限性。此外，它可以创建的svg只是视图，而不是您所习惯的可伸缩矢量。

经验法则是，如果它有基于web的ui，它将不能与react原生一起工作。

e)见d

g)根据我的经验，svg在react原生中有内存泄漏，这可能会导致性能问题。他们可能已经在较新的版本中修复了这个问题。我使用的最新版本是.40