Wie aktualisiere ich den Status im Kontext in React.js, ohne dass die Komponente erneut gerendert wird?

Question

Im Grunde verwende ich also die Google Maps-API und wenn ich auf ein Gebäude klicke, wird ein Modal mit einigen Informationen angezeigt. Der Status des Modus ist im Kontext und wird über Klickereignisse auf der Karte aktualisiert. Wenn der Status aktualisiert wird, wird die gesamte Karte erneut gerendert (und verkleinert), da der Status von der Kartenkomponente selbst aktualisiert wird. Wie kann ich den Kontextstatus aktualisieren, ohne dass die Karte erneut gerendert wird?

Ich habe versucht, memo und useCallback zu verwenden, aber da die Requisiten aktualisiert werden (Kontext), wird die Karte erneut gerendert.

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 而不是你的组件