遍历列表调用useSelector触发重复渲染的优化方案咨询

问题背景 #

我有如下选择器：

export const selectItemById = (state, id) => state.items[id]

通常在组件里这样使用：

const item = useSelector(state => selectItemById(state, id))

但需要获取一组条目时，我会这么写：

const itemIds = [101, 105, 192, 204]
const items = useSelector(state => itemIds.map(id => selectItemById(state, id)))

这会触发控制台警告：

Selector unknown returned a different result when called with the same parameters. This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization

优化方案 #

1. 创建记忆化的批量选择器

用createSelector（来自@reduxjs/toolkit或reselect库）封装批量获取逻辑，它会自动缓存计算结果，只有当依赖的状态或ID列表变化时，才会重新生成数组。

示例代码：

import { createSelector } from '@reduxjs/toolkit'

export const selectItemsByIds = createSelector(
  [
    state => state.items,
    (state, itemIds) => itemIds
  ],
  (items, itemIds) => itemIds.map(id => items[id]).filter(Boolean)
)

组件内使用：

const itemIds = [101, 105, 192, 204]
const items = useSelector(state => selectItemsByIds(state, itemIds))

2. 组件内用useMemo缓存结果

如果不想单独编写批量选择器，可以在组件内用useMemo包裹选择器结果，前提是itemIds的引用是稳定的（比如是组件内常量，或来自已被记忆化的props）。

示例代码：

const itemIds = [101, 105, 192, 204]
const items = useMemo(() => {
  return useSelector(state => itemIds.map(id => selectItemById(state, id)))
}, [itemIds])

注意：若itemIds来自父组件props，需确保父组件传递时用useMemo缓存，或用React.memo包裹当前组件，避免无效触发useMemo。

3. 直接内联批量获取逻辑（配合记忆化）

如果逻辑简单，也可以直接在useSelector内完成批量提取，但同样需要记忆化处理：

const itemIds = [101, 105, 192, 204]
const items = useSelector(createSelector(
  [state => state.items],
  items => itemIds.map(id => items[id])
))

这种方式本质和方案1一致，只是把选择器逻辑内联到组件中。

核心原理 #

每次调用map都会生成新的数组引用，而useSelector通过对比前后引用是否相同来判断是否触发重渲染。通过记忆化处理，能保证只有当实际数据（对应条目或ID列表）变化时，才返回新的数组引用，避免不必要的组件重渲染。

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