如何避免父组件重渲染时未变更useSelector状态的子组件重复渲染？

问题根源 #

你的代码中，Header组件通过useSelector获取了整个dataReducer对象。只要Redux store中该reducer的任意字段更新（哪怕和iconColor无关），都会返回一个新的对象引用，触发Header重渲染。即便传给Child的iconColor值没变化，Header的重渲染也会导致Child被重新渲染——虽然你用了React.memo，但根源是Header本身在不必要地重渲染。

具体修复步骤 #

1. 精准获取需要的状态字段

修改useSelector，只提取Child组件需要的iconColor，而非整个dataReducer对象。这样只有当iconColor实际变化时，Header才会重渲染：

const Header = () => {
  // 直接获取目标颜色字段，避免返回整个对象
  const iconColor = useSelector((state) => state.dataReducer?.data?.icon?.color);
  
  return iconColor ? (
    <>
      // code...
      <Child iconColor={iconColor} />
    </>
  ) : (
    ""
  );
};

2. 确保React.memo正常工作

如果iconColor是字符串、数字这类基本类型，React.memo的默认浅比较逻辑已经能判断props是否变化，无需额外配置。如果iconColor是复杂类型（比如包含多个属性的对象），可以给React.memo传入自定义比较函数：

const Child = React.memo(({ iconColor }) => {
  useEffect(() => {
    // code...
    console.log(1);
  }, []);

  return (
    <>
      <div style={{ color: iconColor }}>
        // code...
      </div>
    </>
  );
}, (prevProps, nextProps) => {
  // 自定义比较逻辑，判断颜色值是否相等
  return prevProps.iconColor === nextProps.iconColor;
});

3. 多字段场景用shallowEqual优化

如果需要从dataReducer中获取多个字段，可使用Redux提供的shallowEqual作为useSelector的第二个参数，实现浅比较对象的字段，避免不必要的重渲染：

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

const Header = () => {
  const { iconColor, otherField } = useSelector(
    (state) => ({
      iconColor: state.dataReducer.data.icon.color,
      otherField: state.dataReducer.data.other
    }),
    shallowEqual // 浅比较返回的对象，只有字段变化时才触发重渲染
  );
  
  return iconColor ? (
    <>
      // code...
      <Child iconColor={iconColor} />
    </>
  ) : (
    ""
  );
};

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