如何避免Redux切换主题时React组件发生不必要的重渲染？

重渲染根因：你的MuiThemeProvider被放在App组件的根层级，且App通过mapStateToProps订阅了theme状态，每次主题更新时App会整体重渲染，其下所有子组件默认会跟随重渲染，和标签页自身是否依赖主题状态无关。可按以下步骤优化：

• 给标签页组件增加渲染拦截逻辑
  类组件可继承React.PureComponent，或在shouldComponentUpdate中手动对比新旧props/state，仅当组件自身依赖的属性变化时才返回true允许重渲染；函数组件用React.memo包裹，默认做浅层props对比，若props包含引用类型可传入第二个参数自定义对比规则。
• 优化Redux订阅逻辑
  检查所有标签页组件的Redux订阅逻辑（mapStateToProps或useSelector），如果组件不需要用到主题相关属性，不要在订阅返回值中包含theme相关字段。如果使用useSelector，注意返回值的引用稳定性，避免每次执行都返回新对象，必要时引入shallowEqual做浅层对比。
• 保证props引用稳定
  检查父组件传递给标签页的回调函数、对象类型props，避免每次父组件重渲染时生成新的引用。类组件中不要在render方法内生成新的回调函数，函数组件中用useCallback包裹回调、useMemo包裹引用类型的props，保证引用不变。
• （可选）调整Context提供者层级
  如果只有部分组件需要响应主题变化，可将MuiThemeProvider下移到这部分组件的公共父级，而非包裹整个应用，从根源上减少主题变化触发的重渲染范围。

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