Reactjs 反应：保持昂贵的组件安装_Reactjs_Google Maps_React Router_React Router Dom

Reactjs 反应：保持昂贵的组件安装

reactjs google-maps

Reactjs 反应：保持昂贵的组件安装,reactjs,google-maps,react-router,react-router-dom,Reactjs,Google Maps,React Router,React Router Dom,我有一个带有React&React路由器的单页应用程序。一个页面包含一个谷歌地图组件，创建该组件的成本很高（每1000个实例7美元），因此当用户来回导航时，这会产生成本我的想法是在全局某个位置创建Maps组件，并以某种方式将其注入挂载时的PageComponent，以便可以重用相同的实例。有什么想法可以实现这一点吗？在一个旧项目中，我做了类似的事情：在组件卸载阶段，您可以将映射的节点（这里是普通的JavaScript DOM API…没有反应）移动到另一个DOM注释（隐藏）中安装React应

我有一个带有React&React路由器的单页应用程序。一个页面包含一个谷歌地图组件，创建该组件的成本很高（每1000个实例7美元），因此当用户来回导航时，这会产生成本

我的想法是在全局某个位置创建Maps组件，并以某种方式将其注入挂载时的

PageComponent

，以便可以重用相同的实例。有什么想法可以实现这一点吗？

在一个旧项目中，我做了类似的事情：在组件卸载阶段，您可以将映射的节点（这里是普通的JavaScript DOM API…没有反应）移动到另一个DOM注释（隐藏）中

安装React应用程序组件时，必须检查DOM节点是否存在，在这种情况下，将其移动到React容器中，而不是创建新的应用程序

之后可能需要触发一些映射重绘事件（可能运行一个窗口

resize

事件就足够了）。

这是否与React的虚拟DOM冲突？我想我可以使用JavaScript API在某处添加一个DOM节点，但我看不到一种返回控制权以做出反应的方法？除非你不去碰那些有反应的节点。您不能修改React创建的节点（如果这样做，您会出错），但它不关心第三方JavaScript生成的节点，即使是在React DOM树中。@hendra啊！现在我从你的问题中看到了我遗漏的东西。如果你的Map实现不是基于反应的，或者至少它使用另一个<代码> ReaToMe.Reals Calk（这样一个完全不同的反应应用程序，在那里你不能共享东西）是的，在我使用@反应谷歌MAP/API的时候，但是我可以考虑使用香草JS作为地图和标记。谢谢