为何移除Overlay组件后Map组件会重新挂载？

嘿，这个问题我之前在项目里也踩过坑！核心原因是React的协调（Reconciliation）算法在处理子节点列表变化时的逻辑导致的，我来给你拆解一下并给出可行的解决方案：

问题到底出在哪？ #

你的渲染结构是这样的：

<div>
  {showOverlay && <Overlay />}
  <Map /> {/* 你希望它只挂载一次 */}
</div>

当showOverlay从true切到false时，父<div>的子节点列表从[<Overlay />, <Map />]变成了[<Map />]。React对比新旧子节点是按顺序逐个比对的：

• 第一个旧节点是<Overlay />，新节点是<Map />——两者类型完全不同，React会直接卸载旧的<Overlay />，然后尝试创建一个新的<Map />节点。
• 紧接着，旧列表里的第二个节点<Map />在新列表里找不到对应的位置了，React会把这个旧的<Map />也卸载掉。

这么一折腾，原来的Map组件就被彻底卸载，然后重新挂载了一个新的实例，这就是你看到地图重新加载的根本原因。

怎么解决？这里有几个靠谱的方案 #

方案1：给Map加个固定的key

给<Map />指定一个永远不变的key值，让React能精准识别出“这是同一个组件”，不管它在子节点列表里的位置怎么变：

<div>
  {showOverlay && <Overlay />}
  <Map key="persistent-map" />
</div>

key的作用就是给React一个标识，只要这个标识不变，React就会保留组件的实例，不会随便卸载重建。这是最简单直接的方法。

方案2：调整DOM结构，把Map放在稳定的位置

你可以把Overlay单独包在一个容器里，让Map始终处于父节点的固定位置，这样不管Overlay显不显示，Map在子节点列表里的位置都不会变：

<div>
  {/* 把Overlay放在单独的容器里，不影响Map的位置 */}
  <div>{showOverlay && <Overlay />}</div>
  <Map />
</div>

这样React对比子节点时，会发现Map一直是父<div>的第二个子节点，自然就不会去卸载重建它了。

方案3：关于memo/useMemo的提醒

别想着用React.memo或者useMemo来解决这个问题哦！这俩只能阻止不必要的重新渲染，但管不了组件的挂载和卸载——挂载是创建组件实例，卸载是销毁实例，和渲染不是一回事。所以这俩只能作为后续优化的辅助手段，核心还是前面两种方法。

总结 #

优先用加key或者调整DOM结构的方法，这俩都能稳稳保住Map组件的实例，避免它被反复卸载重建，完美解决地图重新加载的问题。

内容的提问来源于stack exchange，提问作者Théo Champion