Javascript 在组件之间共享数据而不重新加载组件

我有一个地图组件，用户将在其中选择图像和另一个组件，以便使用选择中的数据。但是，当我在地图组件上设置上下文时，它会重新加载并重置地图。-如何阻止此组件重新加载，或使用方法共享此数据而不触发重新加载

使用缩放按钮/鼠标滚轮查看重置问题

我认为这样做的方法是使用上下文组件，并将函数作为值传递到提供程序中

import React, { useState, createContext } from "react";
export const ImageContext = createContext(); 
export const ImageProvider = (props) => {
    const [images, setImages] = useState([]);
    return <ImageContext.Provider value={[images,setImages]} >
    {props.children}
    </ImageContext.Provider>;
 };

我将上下文和使用上下文导入我的

mapcomponent

，如下所示

import { ImageContext } from "./ImageContext";
const [images, setImages] = useContext(ImageContext);

然后，当用户输入地图时，将上下文设置如下

export const WebMapView = () => {
...
    setImages(results.features);
...
}

问题说明：

我需要在地图上获取选择数据，并在用户每次输入时将其传递到

侧组件

，而无需重新加载地图，但在状态中有新数据可用时，保持react重新加载

侧面板

的正常功能

我需要将信息从

侧面板

传递到

mapcomponent

以在地图内处理，但不需要重新加载地图

我开始觉得上下文不是合适的工具，我应该使用其他工具吗？我已经研究过shouldComponentUpdate和

purecomponents

，但是文档中说它们更多的是“建议”，不能保证防止重新加载

export const WebMapView = () => {
...
    setImages(results.features);
...
}