在useSelector中可以使用map方法吗？是否有相关限制或编码规范约束？

首先可以明确：没有官方规范或通用编码实践明确禁止在useSelector回调中使用map等数组遍历方法，但你当前的写法存在明确的性能隐患，不推荐直接这么用，具体问题和优化方案如下：

现有写法的问题 #

你给出的示例代码核心隐患有两个：

• useSelector的回调会在每一次Redux全局状态更新时重新执行，每次执行map都会返回一个全新的数组，哪怕state.appReducer.items本身没有发生任何变化
• useSelector默认用===严格相等判断返回值是否变化，你每次返回的数组都是全新引用，甚至还在外层包了一个新对象，会导致当前组件不管相关状态有没有更新都会强制重渲染，状态更新频繁的场景下会产生明显的性能损耗

推荐的优化写法 #

方案1：拆分选择器，转换逻辑移到组件内做缓存 #

// 只选中原始items数组，只有当items本身引用变化时才会触发组件更新
const originalItems = useSelector((state: any) => state.appReducer.items)
// 用useMemo缓存转换结果，仅originalItems变化时才重新执行map
const items = useMemo(() => {
  return originalItems.map((item: any) => ({ itemID: item.id, itemDescription: item.desc }))
}, [originalItems])

方案2：使用reselect创建记忆化选择器（适合多组件复用逻辑的场景） #

import { createSelector } from '@reduxjs/toolkit'

// 带缓存的选择器，仅当依赖的items变化时才会重新计算转换结果
const selectFormattedItems = createSelector(
  (state: any) => state.appReducer.items,
  (items) => items.map((item: any) => ({ itemID: item.id, itemDescription: item.desc }))
)

// 组件内直接使用
const items = useSelector(selectFormattedItems)

方案3：必须在useSelector内写转换逻辑的话，自定义比较函数 #

如果确实有特殊需求要把转换逻辑放在useSelector回调中，可以传入第二个参数shallowEqual做浅层比较，避免不必要的重渲染：

import { shallowEqual, useSelector } from 'react-redux'

const { items } = useSelector((state: any) => ({
   items: state.appReducer.items.map((item: any) => {
      return { itemID: item.id, itemDescription: item.desc }
   })
}), shallowEqual)

内容的提问来源于stack exchange，提问作者bacon-delight