使用useMemo配合useSelector缓存映射值的技术疑问

一、useMemo的依赖数组该传什么？ #

直接传value没用——因为你提到useSelector每次返回新的数组引用，这会导致useMemo每次渲染都触发重新计算，等于白缓存。

要解决这个问题，核心是让useSelector返回的value本身具备记忆性：只有当数组内容变化时，才生成新的引用。最标准的做法是用Redux官方推荐的reselect库创建记忆化选择器：

// 在组件外部定义记忆化选择器
import { createSelector } from 'reselect';

// 先获取原始数据源
const selectRawData = state => state.targetModule.rawData;
// 定义映射逻辑的记忆化选择器
const selectMappedData = createSelector(
  [selectRawData],
  rawData => rawData.map(item => {
    // 这里写你的映射逻辑，比如转换字段、计算值等
    return { id: item.id, label: item.name.toUpperCase() };
  })
);

// 组件内直接使用
const mapped = useSelector(selectMappedData);

这种情况下，selectMappedData只会在rawData的内容真正变化时，才重新执行映射逻辑并返回新数组。此时组件里根本不需要useMemo，直接用mapped即可。

如果暂时不想引入reselect，也可以用JSON.stringify(value)作为useMemo的依赖，但这种方式不推荐——一是性能差（大数组序列化开销高），二是如果数组里有函数、Symbol这类无法序列化的内容会出错：

const mapped = useMemo(() => value.map(...), [JSON.stringify(value)]);

二、有没有比useMemo更合适的方案？ #

有，而且是更优的方案：把映射逻辑封装到记忆化Redux选择器中，也就是上面提到的reselect方案。

相比useMemo，它的优势在于：

• 缓存逻辑脱离组件，代码更简洁，组件只负责获取数据
• 缓存是全局的，如果多个组件用到同一个映射后的数据，能共享缓存结果，避免重复计算
• 符合Redux的最佳实践：reducer存原始数据，衍生数据通过选择器计算，避免数据冗余

另外，不建议在reducer里直接存储映射后的数据——这会导致数据冗余，增加维护成本，当原始数据变化时还要同步更新衍生数据，容易出错。

内容的提问来源于stack exchange，提问作者qbr_dude