0

我有以下问题：

我想使用react-leaflet'sGeoJSON组件创建一个简单的等值线图。我还想要一个工具提示，显示悬停在GeoJSON功能上的值。问题是性能。可以在此处找到 CodePen 示例：https ://codepen.io/timester-the-typescripter/pen/gOXGKOY

我将事件处理程序附加到每个GeoJSON功能，并在我的“主”组件中设置一个状态变量，该组件保存当前悬停区域的值。

const [selected, setSelected] = React.useState(null);

我的工具提示依赖于该状态变量来显示其值。因为每个鼠标悬停事件都会导致主组件状态发生变化，所以 GeoJSON 组件一直被重新渲染。这在 CodePen 示例中不是一个大问题，但对于完整的世界地图来说，这是不幸的。

我假设状态更改会导致这种情况，因为如果我注释掉 2setSelected行（CodePen 中的第 55 行和第 67 行），重新渲染（对 的调用createGeoJSON）停止，并且事件处理程序运行得更快，因为分析器图片显示以下。

状态改变的 Mouseout 事件： 状态改变的 Mouseout 事件

状态更改的 Mouseout 事件已注释掉： 状态更改的 Mouseout 事件已注释掉

我尝试了许多解决方案都没有成功。例如，我认为我无法记住 GeoJSON 组件，因为 Tooltip 必须是它的子组件，这取决于主组件的状态。

将来，我想根据悬停状态变量（例如图例等）添加更多组件。也许该变量也会比简单的数字更复杂一些。

我在这里有什么选择？我对此有另一个 stackowerflow 问题，但后来我没有完全理解这个问题，所以它不是超级专注。我正考虑用 Angular 重写它。我发现 react 和 react-leaflet 使用起来非常愉快，直到出现这个问题。

4

2 回答 2

1

问题是目前您正在通过状态在每次鼠标悬停时使用适当的工具提示重新创建地图。相反，您应该在创建地图时使用layer.bindTooltip(). 这将允许您只显示/隐藏它们而无需再次重新创建地图，因为它们已经创建并且它们的创建将不依赖于状态。

有关弹出窗口的示例，请参阅此 github 问题（但工具提示的逻辑应该相同）：https ://github.com/PaulLeCam/react-leaflet/issues/33

于 2022-02-16T10:40:11.270 回答
0

我从这个 reddit 评论中得到了帮助https://www.reddit.com/r/reactjs/comments/std46f/comment/hx3yq34/?utm_source=share&utm_medium=web2x&context=3

我基于此应用的解决方案是不使用Tooltip作为子组件，而是在onEachFeature方法中为每一层绑定一个tooltip。

const onEachFeature = useCallback((feature, layer) => {
    layer.bindTooltip(feature.properties.COUNT, {sticky: true});
    ...

这样我也可以将GeoJSON组件包装在 auseMemo()中，因为不再依赖于selected状态。我还将styleandonEachFeature函数包装在useCallback().

这个组合解决了这个问题！

于 2022-02-16T10:38:31.710 回答