在 Redux 中，我们经常需要深入到组件树中的某个组件获取特定的数据。但是，这种深度遍历可能导致我们的组件多次调用同一 Redux 数据，而浪费资源。在这篇文章中，我们将讨论如何避免 Redux 中的重复调用，以优化我们的应用程序的性能。
原因
首先，我们需要了解 Redux 的工作原理。当在 Redux 中存储状态时，它使用一个“树”结构保存所有状态。当访问状态时，Redux 将按层级向下查找状态，直到找到所需的状态为止。在某些情况下，这可能会导致组件多次调用相同的状态。
例如，假设我们有一个包含两个子元素的组件，并且它们都从 Redux 中获取一个相同的状态值：
// javascriptcn.com 代码示例
import React from 'react';
import { useSelector } from 'react-redux';
const MyComponent = () => {
const value1 = useSelector((state) => state.someState);
const value2 = useSelector((state) => state.someState);
return (
<div>
<span>Value 1: {value1}</span>
<span>Value 2: {value2}</span>
</div>
);
};
export default MyComponent;在这个例子中， value1 和 value2 都使用 useSelector 从 Redux 中读取相同的状态。但是，在组件中的重复调用中，Redux 将尝试多次获取 someState，这可能会导致不必要的资源浪费。
解决方法
有几种方法可以避免 Redux 中的重复调用。下面是其中的两种：
方法一：使用 useMemo
React 提供了 useMemo 钩子，它可以在每次渲染时缓存计算结果。使用 useMemo，我们可以确定仅在 someState 发生更改时调用 useSelector。这将减少组件中的重复调用，同时优化性能。
// javascriptcn.com 代码示例
import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
const MyComponent = () => {
const someState = useSelector((state) => state.someState);
const value1 = useMemo(() => someState, [someState]);
const value2 = useMemo(() => someState, [someState]);
return (
<div>
<span>Value 1: {value1}</span>
<span>Value 2: {value2}</span>
</div>
);
};
export default MyComponent;在这个例子中，我们使用 useMemo 钩子缓存了 someState 的值，并将其作为 value1 和 value2 的值。这将确保在 someState 变化时调用 useSelector，从而避免不必要的多次调用。
方法二：使用 shallowEqual
React-Redux 提供了一个名为 shallowEqual 的实用程序函数，它可以帮助我们比较对象是否相等。这是通过比较对象的属性是否具有相同的引用来进行的。
因此，我们可以使用 shallowEqual 来确保组件中的重复调用不会导致多次调用相同的状态。
// javascriptcn.com 代码示例
import React from 'react';
import { useSelector } from 'react-redux';
import { shallowEqual } from 'react-redux';
const MyComponent = () => {
const someState = useSelector((state) => state.someState, shallowEqual);
const value1 = useSelector((state) => state.someState, shallowEqual);
const value2 = useSelector((state) => state.someState, shallowEqual);
return (
<div>
<span>Value 1: {value1}</span>
<span>Value 2: {value2}</span>
</div>
);
};
export default MyComponent;在这个例子中，我们通过将 shallowEqual 作为第二个参数传递给 useSelector 方法，确保每个组件只处理一次状态。这将避免由于组件的重复调用而产生的不必要性能开销。
总结
在 Redux 中，组件的深度遍历可能导致访问到相同的状态。这些重复的调用可能会导致性能下降，因此我们需要避免它们。我们可以使用 useMemo 钩子或 shallowEqual 实用程序函数来优化我们的应用程序。
始终养成编写高性能代码的良好习惯。这将使您的应用程序更加高效、灵活和响应。
示例代码：https://codesandbox.io/s/redux-avoid-duplicated-state-access-p2ton
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653a0dd47d4982a6eb3ce1db