如何在React.js中更新Context中的状态，而不让组件重新渲染？

Question

所以基本上我正在使用谷歌地图API，当我点击建筑物时，它会显示带有一些信息的模态。该模式的状态位于上下文中，并通过地图上的单击事件进行更新。发生的情况是，当状态更新时，它会再次重新渲染整个 Map（使其缩小），因为状态是从 Map 组件本身更新的。 如何才能更新上下文状态但地图不重新渲染？

我尝试使用 memo 和 useCallback，但由于道具正在更新（上下文），它会再次重新渲染地图。

Answer 1

如果您的地图使用经常更改的上下文中的值，则无法阻止重新渲染。如果你这样做了，那么它就不再起作用了

useContext(Context) 使您的组件在提供程序中的值发生更改时重新呈现。无论您在组件的上下文中使用什么，如果您使用 useContext ，它都会重新渲染。你无法阻止这种情况，这就是上下文的工作原理。但是，如果您的组件使用上下文中不经常更改的内容，则可以使用一些技术来停止重新渲染。

创建使用您想要记住的组件的新组件。在那里调用上下文。将其作为 prop 传递给您的组件。在你的组件上使用 React.memo。但是您必须确保传递给组件的所有属性都已被记住。

此外，您可以使用备忘录中的第二个参数来排除在渲染之间不保留引用的内容（如果您不知道自己在做什么，则不建议这样做，这可能会导致关闭问题）

const YourComponent = React.memo(({someContextValue}) => ...)
const YourNewComponent = () => {
   const {someContextValue} = useContext(SomeContext)
   // here someContextValue is a thing that does not change its value often
   return 
}

那么你必须使用 YourNewComponent 而不是你的组件