React渲染拓扑图的性能问题?

发布于 2022-09-04 10:25:12 字数 578 浏览 16 评论 0

从数据库获取节点和链路的数据绘制拓扑图
节点上1000个左右,链路几百条的情况。
绘图是用D3来画的。
项目前端采用了React。

1 我现在的实现方法是
在componentDidMount中获取节点 链路数据,进行数据处理封装到可绘制的数据,然后通过D3的数据绑定添加相应的节点链路和组元素(svg元素)。所有元素的事件绑定操作也都是在componentDidMount中做事件绑定处理。
这样感觉不是很好,至少componentDidMount中的代码量会很多。

2 如果通过React做数据绑定的话 有个担心就是元素内容频繁变动引起state绑定值的频繁更改,频繁render() 会不会导致卡呢(性能问题)。比如说节点拖拽会引起节点坐标的在draging过程中不断更新就会引起节点state上的坐标值不断更改和rerender(),因为拓扑节点链路比较多,这个过程(reRender())性能会不会出现问题呢。

这种场景下,如果采用React的数据绑定会不会出现性能问题呢?
先问下, 自己有空去实践下。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

坏尐絯℡ 2022-09-11 10:25:12

第一个问题很好解决,如果componentDidMount()里面代码量过多,可以封装成函数再调用。

第二个问题属于及时渲染,对性能上肯定有影响,用react至少可以避免直接对dom做操作,记得国外有一个黑客攻防数据监测网站,我每次在浏览器上打开都会很卡。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文