使用 Redux 的备忘录答案

【问题标题】：useMemo with Redux使用 Redux 的备忘录
【发布时间】：2023-01-17 11:45:39
【问题描述】：

我是 Redux 的新手，我想尽可能地提高我的网络应用程序的性能。

我在 redux 中有一个状态，我将其存储在一个变量中以便稍后显示。

这是代码：

const metricsState = useSelector((state: MetricsStateObject) => state.MetricsState);
const myMetrics = metricsState.myMetrics;

我看到 useMemo 通过在数据没有发生变化时不重新渲染来提高性能。

所以我想知道 const myMetrics = useMemo(() => metricsState.myMetrics, [metricsState.myMetrics]); 是一个好习惯，还是完全没用？

感谢您的时间。

【问题讨论】：

标签： reactjs redux react-usememo

【解决方案1】：

useMemo 用于高成本计算，您不想运行每个渲染。喜欢

const something = useMemo(()=> megaBigArray.reduce((acc,i)=>acc*i,0), [megaBigArray])

或类似的东西。你只计算那个变量，如果megaBigArraychange。

在您的情况下，该代码无论如何都会在每次渲染时运行，但是 useSelector 应该仅在您选择更改商店的一部分时触发渲染。所以没有它你应该很好。

【讨论】：

我现在明白多了。非常感谢你

【解决方案2】：

先说结论吧，完全没用。

为什么？因为 metricsState.myMetrics 只是一个 value-taking 过程，不涉及昂贵的计算。

但是useMemo本身就消耗了一定的计算量。

所以我认为属于过早优化

【讨论】：

非常清楚。非常感谢你

【解决方案3】：

我认为@Wraithys 的回答在这里不正确。我很确定，如果选择器的状态没有改变，React 将不会使用 useSelector 计算组件并且选择器也没有改变。这意味着你也必须记住选择器，否则 React 和 Redux 将无法优化渲染。我认为您可能还必须使用 React.memo() 来记忆组件才能使其完全工作。此外，最好始终在文件中声明您的选择器，这样您就不必记住它们，因为它们是不变的。

【讨论】：