使用 mapbox 和 react 上下文时防止过度重新渲染

Question

我有一个使用 mapbox 地图的应用程序，我试图允许从另一个单独的卡片组件调整视口。我这样做的方法是创建一个视口上下文并将视口和设置它的函数传递给地图和卡片组件。

这可行，但我遇到了重新渲染的问题。每当用户在地图上滚动时，视口会不断变化，因此 Viewport Provider 中的所有内容都会不断重新渲染。代码的简化版本如下

应用程序

<ViewportProvider>
   *Container that holds both the map and the sidebar that renders the card components*
</ViewportProvider>

视口提供者

import React from "react";
const INITIAL_STATE = {
  longitude: 15,
  latitude: 25,
  zoom: 1

};

export const ViewportContext = React.createContext();

export const ViewportProvider = (props) => {
  const [viewport, setViewport] = React.useState(INITIAL_STATE);


  return (
    <ViewportContext.Provider
      value={{
        viewport,
        setViewport,
      }}
      {...props}
    />
  );
}

地图

import React, { useContext } from "react";
import ReactMapGL from "react-map-gl";
import { ViewportContext } from "./ViewportProvider";

const { viewport, setViewport } = useContext(ViewportContext);

<Map onViewportChange={nextViewport => setViewport(nextViewport)} {...viewport}/>

卡片

const {setViewport} = useContext(ViewportContext)

<Card onClick={setViewport(...newValue)}/>

当用户在地图上移动时，如何在不失去用户从卡片组件调整视口的能力的情况下停止过度重新渲染？

Answer 1

通过将viewport 和setViewport 放在同一个上下文中，您将强制侧边栏在每次视口更改时重新渲染，因为它使用useContext(ViewportContext)——即使它只使用setViewport 部分上下文。有几个选项：

• 只需将useContext(ViewportContext) 移动到子组件中即可减少重新渲染对性能的影响，以便在更新视口时仅渲染子组件，而不是整个侧边栏。
• 如果您只需要单向更新（侧边栏按钮可以设置地图的视口，但不需要其他组件知道用户何时在地图上移动），那么您可以从地图中移除 setViewport 调用。
• 将viewport 和setViewport 放在不同的上下文中。这意味着两个 createContext() 调用，但您仍将保留一个 ViewportProvider 组件来呈现两个提供程序，例如const [viewport, setViewport] = useState(); return <Context1.Provider value={viewport}><Context2.Provider value={setViewport}> ...。然后，您的侧边栏可以useContext 仅用于它需要的上下文，并且不会在另一个更改时重新呈现。
• 使用useContextSelector 之类的东西将const {setViewport} = useContext(ViewportContext) 替换为const setViewport = useContextSelector(ViewportContext, (ctx) => ctx.setViewport)。
• 如果您正在考虑更广泛的架构更改，React Redux 或 Recoil 等库可以提供可避免此问题的替代设计。

（顺便说一句，在您编写的代码中，我建议您将传递给ViewportContext.Provider 的value 包装在useMemo(() => ({viewport, setViewport}), [viewport, setViewport]) 中，这样当ViewportProvider 重新启动时它不会触发更新如果视口没有改变，则渲染。）