前言
今天的主角是百度地图api,react-bmapgl是百度地图基于react封装的库,由百度官方提供的包
我在项目中使用时出现非常严重的问题
引入地图后,地图一闪而过,地图区域消失不见
也就是地图加载完成后,瞬间卸载
排除问题
本地环境vite5.4.0,react版本18.3.1,在一番debug下,我排除了是我本地导致了了这种情况,那么可能问题出在react-bmapgl这个库本身上
debug
在源码这个地方,我输出了下信息与注释了地图卸载的代码,地图被成功创建了!
也就是说,地图在创建后,组件会触发卸载,并且卸载后不会再次创建。
问题原因知道了,那时我还没想明白为啥会主动卸载还不会创建,临时解决方案是我在上面的代码基础上打个patch-package补丁,缝缝补补先用着,在我本地组件卸载时,我在主动销毁地图。
issue
在react-bmapgl下提了一个issue
时隔一个月后,一位大佬给了我回复,这位大佬好像是百度地图的员工
关闭严格模式!
于是我尝试了下,关闭严格模式,问题解决,地图能正常创建
问题得到解决
问题怎样产生的呢?
vite创建react项目会默认启用严格模式,这本身没啥问题
<React.StrictMode> <App /> </React.StrictMode>,
启用严格模式是为了帮助开发者识别潜在的问题,比如不安全的生命周期方法、意外的副作用等。
为了达到这个目的会主动触发组件的重复加载和卸载
在严格模式下,React 会对组件的构造函数、render 方法和生命周期方法(如 componentDidMount 和 componentDidUpdate)进行双重调用。这意味着在开发模式下,组件会被挂载和卸载两次。
react-bmapgl 不支持严格模式,在卸载后未重绘
解决方案就是注释严格模式,但是这样做会损失掉严格模式的优势
借用另一位老哥的话
太不优雅啦,希望解决下这个问题