React 钩子会导致无意的重新渲染

Question

我正在使用 React + Leaflet 地图，并注意到地图容器/元素在我显示或关闭模式时重新渲染。

我已经创建了一个沙盒来演示这个问题，但是如果其他示例有帮助的话，我的应用程序中的其他地方也会出现这种情况。

https://codesandbox.io/s/elegant-rain-01f9l?file=/src/App.js

通过阅读替代 SO 帖子，例如 this very similar one，我认识到这可能是由于我的钩子（例如 handleShow/setShow）导致整个组件重新渲染。意外行为如下所示：

如果您拖动地图以使当前位置不在视野范围内并打开模式，我们会强制重新加载<LeafletControlGeocoder/> 和<LocationMarker/>。这很明显，因为地图会重新平移到当前位置，并且地图右上角会出现一个新的“搜索图标”。

复制步骤：

*如果您在沙盒中发现与 react-bootstrap/Modal 相关的问题，只需将依赖项更新为最新（刷新图标） - 这是一个奇怪的沙盒问题，但与我的问题无关。

1. 拖动地图，使当前位置不在视野范围内
2. 点击菜单图标（右上角）> 添加位置
3. 当模态出现时，通知地图重新居中到当前位置并出现另一个搜索图标。

Answer 1

问题是由于在另一个 React 功能组件的主体中定义了一些子组件函数。

function App() { // A React functional component
  const [show, setShow] = useState(false);
  // etc.

  // A child React functional component in the body of another component...
  function LocationMarker() {
    const [position, setPosition] = useState(null);
    // etc.
  }

  // Another child component
  function LeafletControlGeocoder() {
    useEffect(() => {}, []);
    // etc.
  }

  return (
    <>
      {/* More content... */}
      <MapContainer center={[45.4, -75.7]} zoom={12}>
        <LeafletControlGeocoder />
        <LocationMarker />
      </MapContainer>
    </>
  );
}

如果您的子组件是无状态的（没有挂钩），这可能不会有问题。在这种情况下，它们更像是“子模板”。

但是如果这些子组件确实使用了一些钩子，那么在另一个功能组件的主体中会干扰钩子的工作方式：因为子组件函数在每次重新渲染时都会重新创建，React 很难识别那些children 是相同的组件，并最终复制它们的输出。

只需确保不要在另一个功能组件中定义某些功能组件，而是始终在范围的顶层（通常在文件的根目录）。如问题 cmets 中所述，标准做法是每个文件有 1 个组件。

function App() { // A React functional component
  const [show, setShow] = useState(false);
  // etc.

  return (
    <>
      {/* More content... */}
      <MapContainer center={[45.4, -75.7]} zoom={12}>
        <LeafletControlGeocoder />
        <LocationMarker />
      </MapContainer>
    </>
  );
}

// Another React functional component at top scope level
function LocationMarker() {
  const [position, setPosition] = useState(null);
  // etc.
}

// Another component
function LeafletControlGeocoder() {
  useEffect(() => {}, []);
  // etc.
}

固定应用：https://codesandbox.io/s/lively-monad-yve67