javascript - 如何在 React 组件的渲染中持续记忆？

Question

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

我知道 React 带有useMemo()，但我需要记忆的值在第一次渲染时计算一次。因此，在第一次渲染中进行记忆是没有意义的，但在未来的渲染中记忆将是有益的。

我已经阅读了 useMemo() 文档，但它没有提供明确的答案所以：存储在 useMemo() 中的值是否会在调用 useMemo 的组件的重新渲染中持续存在？

如何在 React 组件的不同渲染中持续记忆？

score 1 · Accepted Answer

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

假设上面的代码行在ComponentA. 现在，假设它ComponentA 没有被 unmounted，那么，memoizedValue在重新渲染中仍然存在，并且依赖项（a, b）不会在重新渲染中改变。

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

score 0 · Accepted Answer

为此，您需要使用一种方法将值存储在组件外部，例如提供者和上下文。请参阅 React 官方文档以执行此操作： https ://reactjs.org/docs/context.html

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

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

2 回答 2