Question

使用 Redux 的 useMemo

2022-11-29

2856

reactjs redux react-usememo

我是 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 只是一个 取值 的过程，不涉及昂贵的计算。

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

所以我觉得那属于过早的优化

Answer 3

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