如何在React.js中更新Context中的狀態，而不讓元件重新渲染？

Question

所以基本上我正在使用Google地圖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 而不是你的元件