如何避免Redux useSelector引发组件不必要重渲染？

核心原因 #

你的组件通过useSelector获取整个dataMap字典，而Redux更新字典时（比如添加新键值对）会返回一个新的对象引用。useSelector默认使用浅比较，只要返回的引用变化，就会触发组件重渲染——哪怕当前组件用到的props.id对应的条目根本没变化。

最优解决方案：只获取组件需要的具体数据 #

直接在useSelector中返回当前组件依赖的条目，而不是整个字典。这样只有当该条目本身变化时，组件才会重渲染。

修改后的代码：

interface IComponentProps {
  id: string
}

const Component: React.FC<IComponentProps> = (props) => {
  // 直接提取当前id对应的条目，而非整个字典
  const item = useSelector((store: IRootState) => store.data.value[props.id])

  // 处理条目不存在的情况，避免运行时错误
  if (!item) {
    return <div>数据加载中或未找到</div>
  }

  return (
    <div>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
    </div>
  )
}

备选方案：使用自定义比较函数（若必须获取整个字典） #

如果你确实需要整个dataMap，可以给useSelector传入shallowEqual比较函数（来自react-redux），它会对比对象的第一层属性引用。注意：当字典新增键值对时，整个字典的引用还是会变化，所以这个方案仅适用于字典结构不变、仅修改现有条目的场景。

代码示例：

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

interface IComponentProps {
  id: string
}

const Component: React.FC<IComponentProps> = (props) => {
  const dataMap = useSelector((store: IRootState) => store.data.value, shallowEqual)
  
  const item = dataMap[props.id]
  if (!item) {
    return <div>数据加载中或未找到</div>
  }

  return (
    <div>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
    </div>
  )
}

额外优化：结合React.memo #

如果组件的props可能频繁变化，用React.memo包裹组件，它会浅比较props，避免因父组件重渲染但props未变化导致的不必要更新：

import { memo } from 'react';

interface IComponentProps {
  id: string
}

const Component = memo<React.FC<IComponentProps>>((props) => {
  const item = useSelector((store: IRootState) => store.data.value[props.id])

  if (!item) {
    return <div>数据加载中或未找到</div>
  }

  return (
    <div>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
    </div>
  )
})

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