在React生命周期中长时间运行DOM更新过程

Question

我有一个React组件，其中包含使用Mapbox GL构建的两个映射。 这些是左右地图。

当从服务器获取数据并通过Redux存储传递数据时，Component会独立地接收leftMapData和rightMapData之类的道具。

在componentDidUpdate()内部，我检查新道具是否与以前不同，并运行一些Mapbox GL地图更新程序，这可能需要几秒钟。

正如我注意到的那样，如果两个或更多componentDidUpdate个事件一个接一个地快速发生，就像几乎立即发生一样，那么第一个地图更新会以某种方式被取消，并且地图不能正确更新。

如何确保下次更新不会取消更新程序？

道具有时只来一张地图，然后我只需更新那张。有时道具会出现两个地图，我需要独立更新每个地图，而不是打破另一个地图。

Answer 1

您可以使用shouldComponentUpdate方法来控制组件中的更新。

shouldComponentUpdate: function(nextProps, nextState) { // This function should return a boolean, whether the component should re-render. //Recommended - Do not do deep equality checks or using JSON.stringify() //to avoid performance issues return false; }