Question

我有一个显示网络地图的组件。我需要将数据传入和传出地图组件，但从不需要重新渲染它。我在react以外的地图上做所有工作-直接使用映射库。

使用功能性组件和挂钩，如何在不重新渲染的情况下传递道具，对其进行操作并从该组件中获取数据？我尝试过使用useEffect()和memo()的组合，但是它们最终抵消了彼此的使用：

我有useEffect监视相关道具和备忘录阻止渲染的更改，但是由于备忘录阻止渲染，并且useEffect仅在渲染之后触发，因此我无法处理此组件中的道具更新。

const Map = memo(props => {
  useEffect(() => {
    // run this on props update
    console.log(props.selectedImg);
  }, [props.selectedImg]);

  //... map lib specific code using props

  return <div id="mapDiv" />;
  }, 
  //prevent all rerenders using memo..
  () => true
);

这不起作用，因为备忘录阻止了重新渲染，因此即使更新了道具，也不会触发useEffect。

如何在完全阻止此组件重新渲染的同时使用挂钩来处理道具？也许这种结构根本不正确。

感谢您的帮助！

React Hooks-防止重新渲染，但要对新道具采取行动

0 个答案: