在StrictMode下，react-google-maps不会卸载组件

Question

在所附的示例代码和框中，我有一个使用react-google-maps的地图。 使用<React.StrictMode>包装地图时，它将停止卸载组件。

我看到react-google-maps卸载组件的方式通常是使用instance.setMap(null)将其map设置为null。我不明白为什么这种行为应该在StrictMode下发生。

以下是演示问题的代码和框： https://codesandbox.io/s/jv61orz64y

谢谢！
乌里

Answer 1

我遇到了同样的问题，在回购中遇到了您的问题，因此也遇到了这个问题。我以a comment on your repo issue的形式详细介绍了该问题，但总结如下：

• react-google-maps有点顽皮，实际上在组件的构造函数中做了一些渲染式的工作。在这种情况下，它将初始化google.maps.Marker并调用setMap。这样可以将标记放置在地图上。
• 它从componentWillUnmount的地图中删除标记
• 可以构造一个组件 ，但永远不会最终成为mounted，发生这种情况时，就不会调用componentWillUnmount，因为没有要卸载的东西
• 这意味着，如果该组件已构造但从未安装，因此从不调用componentWillUnmount，则标记永远不会从地图上删除
• 在StrictMode中，这种确切情况似乎发生了，请参阅下面的说明：

如果您查看my fork of your demo，则会发现在非严格模式下，如果加载页面放大然后缩放，则构造，装入，更新，卸载然后重新装入标记代理（MyMarker）出来。但是，在严格模式下，会构造两个标记，但只能安装一个。因此，这里发生的事情不是不是在放大时就不会卸载标记，而是始终在地图上有两个标记。通过构建而从未安装的方法使它在地图上“孤立”，并且完全在React的控制之下的一种方法。确实已将其删除并正确重新添加。