如何在 React 組件的渲染中持續記憶？

Question

我正在使用帶有鈎子的 React。 我有一個昂貴的 function 我想記住。

我知道 React 帶有useMemo() ，但我需要記憶的值在第一次渲染時計算一次。 因此，在第一次渲染中進行記憶是沒有意義的，但在未來的渲染中記憶將是有益的。

我已經閱讀了 useMemo() 文檔，但它沒有提供明確的答案所以：存儲在 useMemo() 中的值是否會在調用 useMemo 的組件的重新渲染中持續存在？

如何在 React 組件的不同渲染中持續記憶？

Answer 1

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

假設上面的代碼行在ComponentA內。 現在，假設ComponentA沒有被unmounted ，那么memoizedValue在重新渲染中仍然存在，因為依賴關系（ a ， b ）不會在重新渲染中改變。

反應文檔還說，將來反應有時可能會決定忘記記憶的值，因此應該將其用於優化而不是語義保證。

Answer 2

為此，您需要使用一種方法將值存儲在組件外部，例如提供者和上下文。 請參閱 React 官方文檔來執行此操作： https://reactjs.org/docs/context.html

我個人的建議是使用 Redux 進行 React。 這是您的官方文檔： https://redux.js.org/這非常適用於需要為您的應用程序存儲全局 state 或數據的專業解決方案。

您需要知道 useMemo 始終與組件生命周期相關聯。