请教关于 React 的性能优化

看下百度地图 谷歌地图他们怎么处理的

肯定得动态渲染啊 你没有用地图的功能 自己在地图上叠加层了么

之前做的项目中遇到过类似的问题，需求是在地图上绘制成千上万的坐标点。使用百度、高德、以及天地图时都会出现页面卡顿，而使用谷歌地图则不会出现此问题。当时排查得到的原因是国内的这些地图在绘制时都是直接生成的 HTML 元素覆盖在地图上，大量的元素导致了页面的卡顿。而谷歌地图则是使用的 canvas 绘制，不会产生新的 HTML 元素。

除了 canvas 绘制这一点之外，我还建议你不要绘制 Offscreen canvas 的元素，也就是可视区域外的元素不选择渲染。当可视区域改变时再判断是否需要渲染。至于说判断可视区域改变时那些元素需要改变渲染这方面的优化，可以使用一些空间索引及算法，例如四叉树等等。不过应该不用复杂到这一步。

如果业务允许的话，还可以使用点聚类来减少需要绘制的点的数量。
https://doc.arcgis.com/zh-cn/maps-for-office/design-and-use/cluster-points.htm

动态渲染啊 一次性渲染这么多节点肯定消耗性能 再开启硬件加速来辅助

@murmur 添加了

@zrp1994 非常感谢，我考虑一下怎么优化，确实是我现在一下子渲染了所有 layer

这种类似 POI 的东西一定要找专门的组件来做，openlayers 这种，什么缩放比例，什么区域显示多少东西都是专门的处理

以前看 D 版的成都地图，有十几个图层，你不做处理的话根本显示不过来

你们是不是对地图引擎有限制，如果没有的话建议上 mapbox，10w 级以上的数据普通 canvas 渲染压力也是很大的，最好是上 webgl 引擎

@sakitamFDD 我们就是用 mapbox ..... 现在数据库才两千多，就走肉眼可见的延迟和白屏

@ericgui emmm，那我觉得你可能使用方式有问题了，他本身如果使用矢量切片的话百万级的数据渲染都是没有问题的，还可以配合 deck.gl ，你可不要说你们使用的是 marker 类