Redux Store变更引发App.tsx意外重渲染的原因与解决方法

开发者阿泽

2026-8-13

问题背景

基础的App.tsx文件未明确处理重渲染依赖，代码如下：

export default function App(): JSX.Element {
  const session: SessionState = useAppSelector((state) => state.session);
  console.log("App file reloaded");
  return (
    <div>
      <ChildComponent />
      {session.cookieConsent ? null : <CookieConsent />}
    </div>
  );
}

ChildComponent是唯一满足以下条件的组件：

将Redux状态session列为依赖
会更新session状态存储
其代码片段如下：

const session: SessionState = useAppSelector((state) => state.session);
const dispatch = useAppDispatch();
...
dispatch(setSession({ ...session, updated }));  // 状态更新逻辑正常
useEffect(()=>{},[session])

核心问题：为何子组件更新Redux状态/store时，App.tsx会发生重渲染？如何阻止该现象？

原因分析

App.tsx通过useAppSelector直接订阅了整个session对象。当ChildComponent更新session时，使用{ ...session, updated }创建了新的对象引用，useAppSelector默认会对比前后两次返回值的引用是否相同——只要引用变化，就会触发组件重渲染，哪怕App.tsx实际只用到session.cookieConsent这一个字段。

解决方案

1. 精准订阅所需字段

修改App.tsx中的useAppSelector，只订阅实际用到的cookieConsent字段，这样只有当该字段的值变化时，才会触发重渲染：

export default function App(): JSX.Element {
  // 只订阅需要的字段
  const cookieConsent = useAppSelector((state) => state.session.cookieConsent);
  console.log("App file reloaded");
  return (
    <div>
      <ChildComponent />
      {cookieConsent ? null : <CookieConsent />}
    </div>
  );
}

2. 使用浅比较器优化订阅

如果确实需要订阅整个session对象，可以用Redux Toolkit内置的shallowEqual作为比较函数，它会对比对象的顶层字段，只有当顶层字段的值发生变化时才触发重渲染，而非仅因对象引用变化就重渲染：

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

export default function App(): JSX.Element {
  const session: SessionState = useAppSelector((state) => state.session, shallowEqual);
  console.log("App file reloaded");
  return (
    <div>
      <ChildComponent />
      {session.cookieConsent ? null : <CookieConsent />}
    </div>
  );
}

3. 拆分Redux状态结构

将session中频繁更新的字段和不频繁更新的字段拆分到不同的slice中，让App.tsx只订阅包含cookieConsent的slice，避免被其他字段的更新影响。

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