我如何在 React 组件的渲染中持久记忆?

How can I persistently memoize across renders of a React component?

我正在使用带钩子的 React。我有一个昂贵的功能,我想记住。

我知道 React 带有 useMemo(),但我需要记忆的值在第一次渲染时计算一次。所以在第一个渲染中记忆是没有意义的,但在未来的渲染中记忆将是有益的。

我读过 the useMemo() documentation but it doesn't provide a firm answer 所以:存储在 useMemo() 中的值是否在调用 useMemo 的组件的重新渲染中持续存在?

如何在 React 组件的不同渲染中持久记忆?

为此,您需要使用一种方法将值存储在组件外部,例如 Provider 和 Context。请参阅 React 官方文档来执行此操作:https://reactjs.org/docs/context.html

我个人的建议是使用 Redux for React。这是您的官方文档:https://redux.js.org/ 这非常适用于需要为您的应用程序存储全局状态或数据的专业解决方案。

你需要知道 useMemo 始终与组件生命周期相关联。

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

假设上面的代码行在 ComponentA 内。现在,假设 ComponentA 没有被卸载 ,那么,memoizedValue 在重新渲染中仍然存在,同时考虑到依赖项(ab) 在重新渲染时不要改变。

还有 React 文档说,将来 React 有时可能会决定忘记记忆值,因此应该将其用于优化而不是作为语义保证。