将 Memo 与 Redux 结合使用

Question

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

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

这是代码：

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

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

所以我想知道

const myMetrics = useMemo(() => metricsState.myMetrics, [metricsState.myMetrics]);

是一个很好的做法，还是完全没用？

感谢您的宝贵时间。

Answer 1

useMemo

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

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

或者类似的东西。您只需计算该变量，如果

megaBigArray

发生变化。

在您的情况下，该代码无论如何都会在每次渲染时运行，但是

useSelector

应该仅在您选择的商店部分发生更改时触发渲染。所以没有它你应该很好。

Answer 2

先说结论吧，完全没用。

为什么？ 因为

metricsState.myMetrics

只是一个

value-taking

过程，不涉及昂贵的计算。

但是

useMemo

本身就消耗一定的计算量。

所以我认为这属于过早优化

Answer 3

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

Answer 4

我不同意@Doge Fromage 刚刚所说的关于@Wraithys 的内容。当他提到使用 React.memo() 时，我就知道他不知道自己在说什么。 @Wraithys 的答案是正确的。除非有大量操作需要至少半秒才能完成，否则不需要使用 useMemo。 useSelector 对选择器函数返回的内容执行浅层相等检查，并且仅当比较的原始值或对象引用存在差异时才会触发组件重新渲染。