React.memo包裹的函数式组件仍触发重渲染问题排查

核心问题点 #

• 重渲染判断逻辑错误：你在StatsButton里写的空依赖useEffect日志，只会在组件首次挂载时触发一次，后续重渲染根本不会执行，靠这个日志判断组件是否重渲染完全不准。
• 自定义比较函数返回值逻辑搞反：React.memo第二个参数传入的比较函数，返回true时代表新旧props无差异，跳过重渲染；返回false时代表需要重渲染。如果按你想的固定返回false，反而会强制组件每次都重渲染，和预期完全相反。
• 对父组件重渲染的认知错误：点击按钮时你调用了setStatsButtonActive更新父组件内部状态，React中只要组件自身状态更新就会触发重渲染，不存在状态更新了父组件不重渲染的情况。
• 你当前写的React.memo(StatsButton)基础语法本身没有问题，之所以觉得没生效，完全是因为判断重渲染的日志位置写错了。

具体修复方法 #

1. 修正重渲染判断方式 #

直接在组件函数体顶层打日志，不要放在空依赖的effect里：

const StatsButton: React.FC<Props> = ({ isActive, onClick }) => {
    // 组件每次执行（首次挂载+所有重渲染）都会打印该日志
    console.log('StatsButton render run');

    return (
        <S.Button onClick={onClick} isActive={isActive}>
            {isActive ? 'Daily stats' : 'All time stats'}
        </S.Button>
    );
};

改完后你会发现，只要传入的isActive值、onClick引用没变化，父组件因为其他无关状态重渲染时，这条日志不会重复打印，证明memo已经正常生效。

2. 自定义比较函数的正确写法 #

如果需要自定义props比较逻辑，按如下格式传参即可：

export default React.memo(StatsButton, (prevProps, nextProps) => {
    // 比较逻辑写在这里
    // 示例：仅当isActive变化时才触发重渲染，忽略onClick的引用变化
    return prevProps.isActive === nextProps.isActive;
});

注意：不要写固定返回值的比较逻辑。如果固定返回true，组件会永远跳过重渲染，isActive切换时按钮文字、激活样式都不会更新，直接导致UI和状态不一致的bug。

3. 场景适配建议 #

你当前场景下，点击按钮切换isActive时，StatsButton必须重渲染才能更新展示的文案和激活样式，这是必要的重渲染，不需要阻止。React.memo的作用是跳过父组件因其他无关状态更新导致的子组件无效重渲染，不要盲目阻止所有重渲染，反而会引发功能异常。

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