react-bmapgl不支持react严格模式

444 阅读2分钟

前言

今天的主角是百度地图api,react-bmapgl是百度地图基于react封装的库,由百度官方提供的包

我在项目中使用时出现非常严重的问题

引入地图后,地图一闪而过,地图区域消失不见

也就是地图加载完成后,瞬间卸载

排除问题

本地环境vite5.4.0,react版本18.3.1,在一番debug下,我排除了是我本地导致了了这种情况,那么可能问题出在react-bmapgl这个库本身上

debug

在源码这个地方,我输出了下信息与注释了地图卸载的代码,地图被成功创建了!

image.png

也就是说,地图在创建后,组件会触发卸载,并且卸载后不会再次创建。

问题原因知道了,那时我还没想明白为啥会主动卸载还不会创建,临时解决方案是我在上面的代码基础上打个patch-package补丁,缝缝补补先用着,在我本地组件卸载时,我在主动销毁地图。

issue

在react-bmapgl下提了一个issue

QQ_1729216626573.png

时隔一个月后,一位大佬给了我回复,这位大佬好像是百度地图的员工

关闭严格模式!

于是我尝试了下,关闭严格模式,问题解决,地图能正常创建

问题得到解决

问题怎样产生的呢?

vite创建react项目会默认启用严格模式,这本身没啥问题

<React.StrictMode> <App /> </React.StrictMode>,

启用严格模式是为了帮助开发者识别潜在的问题,比如不安全的生命周期方法、意外的副作用等。

为了达到这个目的会主动触发组件的重复加载和卸载

在严格模式下,React 会对组件的构造函数、render 方法和生命周期方法(如 componentDidMount 和 componentDidUpdate)进行双重调用。这意味着在开发模式下,组件会被挂载和卸载两次。

react-bmapgl 不支持严格模式,在卸载后未重绘

解决方案就是注释严格模式,但是这样做会损失掉严格模式的优势

借用另一位老哥的话

QQ_1729217651335.png

太不优雅啦,希望解决下这个问题