全局状态更新时如何阻止React父组件不必要重渲染？

为什么React.memo对Header组件无效？ #

React.memo仅能阻止组件因父组件重渲染且自身props无变化时的不必要重渲染，但无法阻止组件因自身内部状态（包括通过useSelector订阅的Redux状态）变化而触发的重渲染。你的Header组件当前存在两个核心问题导致非预期重渲染：

1. 订阅了不必要的Redux状态：
   你在Header中通过useTypedSelector订阅了user、search、notifications三个状态，但从代码来看，Header的JSX渲染只用到了Notifications组件，而Notifications自身已经订阅了notifications状态。这意味着只要user或search状态发生变化（哪怕和Header的渲染完全无关），Header就会触发重渲染。

2. 选择器未做记忆化处理（若需保留状态订阅）：
   如果Header确实需要订阅某些状态（比如user用于显示用户信息），当前的选择器写法可能每次返回新的引用（比如解构对象时），导致Redux误判状态变化，触发组件重渲染。

具体修复步骤 #

1. 移除不必要的状态订阅与action调用

直接删除Header中未在渲染中使用的useTypedSelector和useXxxActions调用，减少不必要的状态监听：

function Header() {
    const navigate = useNavigate() // 仅保留实际用到的hooks

    return <header className={headerStyles.header}>
        <div className={headerStyles.container}>
            <nav className={headerStyles.nav}>
                <ul className={headerStyles.ul}>
                    <li className={headerStyles.nav_element}>
                        <Notifications />
                    </li>
                </ul>
            </nav>
        </div>
    </header>
}

export default React.memo(Header)

2. 对必要的状态订阅使用记忆化选择器

如果Header确实需要订阅某个复杂状态（比如user），使用reselect创建记忆化选择器，确保只有当目标状态字段变化时才触发重渲染：

// 引入reselect
import { createSelector } from '@reduxjs/toolkit';

// 创建记忆化选择器
const selectUserState = state => state.user;
const selectUserDisplayInfo = createSelector(
    [selectUserState],
    (user) => ({
        name: user.name,
        avatar: user.avatar
    }) // 仅提取渲染所需的字段
);

// 在Header中使用
function Header() {
    const { name, avatar } = useTypedSelector(selectUserDisplayInfo);
    const navigate = useNavigate()

    // ... 渲染用户信息等逻辑
    return <header className={headerStyles.header}>
        {/* ... */}
        <Notifications />
        {/* ... */}
    </header>
}

3. 优化Notifications组件的key值

当前Notifications中使用index作为key，这在列表项顺序变化时可能导致渲染异常，建议使用消息唯一标识（比如message.id）作为key：

const Notifications = () => {
    const { notifications } = useTypedSelector(state => state.notifications)

    return (
        <ul>
            {
                Object.values(notifications.chat).flatMap(chatMessages => 
                    chatMessages?.map(message => (
                        <li key={`notification-${message.id}`}> {/* 使用message.id替代index */}
                            {message.message}
                        </li>
                    ))
                )
            }
        </ul>
    )
};

export default React.memo(Notifications)

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