React+Material UI导航栏按钮点击后延迟响应问题如何解决

问题根因 #

• 核心问题是createMuiTheme直接写在了Navigation组件内部，每次组件触发重渲染（包括点击按钮更新mobileOpen、anchorEl、myTheme任意一个state）都会重新生成完整的主题对象。如果你的appliedTheme是直接传入MUI的ThemeProvider作为属性，主题对象变化会触发所有依赖MUI主题的组件全量重渲染，这是点击后延迟高的最主要原因。
• 组件内部定义的light、dark静态配置对象、事件处理函数没有做缓存，每次渲染都会生成新的引用，传递给子组件后会触发子组件不必要的重渲染，放大性能问题。
• 如果ThemeProvider直接包裹在Navigation组件内部，Navigation的重渲染会导致ThemeProvider重新挂载，进一步加剧全量重渲染的耗时。

优化方案 #

1. 抽离主题逻辑，缓存主题对象 #

首先将静态的主题配置提到组件外部，再用useMemo缓存生成的主题对象，仅当主题状态变化时才重新生成主题：

// 放到Navigation组件外部，避免每次渲染重复创建
const light = {
    palette: {
        type: 'light',
    },
}
const dark = {
    palette: {
        type: 'dark',
    },
}

function Navigation(props) {
  // ...其他原有逻辑
  const [myTheme, setTheme] = React.useState(true);
  // 仅myTheme变化时才重新生成主题
  const appliedTheme = React.useMemo(() => {
    return createMuiTheme(myTheme ? light : dark, zhCN);
  }, [myTheme])
  // ...其他原有逻辑
}

更推荐的方案是将主题状态和ThemeProvider整体提升到应用顶层（比如App组件），Navigation组件只负责触发主题切换，避免导航组件的其他状态更新触发主题重生成。

2. 缓存事件处理函数 #

用useCallback包裹所有传递给子组件的事件函数，避免子组件不必要的重渲染：

const handleThemeChange = React.useCallback(() => {
    setTheme(prev => !prev);
}, [])

const handleProfileMenuOpen = React.useCallback((event) => {
    setAnchorEl(event.currentTarget);
}, []);

const handleMenuClose = React.useCallback(() => {
    setAnchorEl(null);
}, []);

const handleDrawerToggle = React.useCallback(() => {
    setMobileOpen(prev => !prev);
}, []);

3. 优化重渲染逻辑 #

• 如果使用了AuthContext，仅在组件用到的context属性变化时才触发重渲染，可以拆分Context或者使用对应的useContext选择器工具。
• 抽屉、用户菜单等弹出层的内部内容如果有大量列表项，用React.memo封装子组件，长列表使用虚拟滚动优化。

4. 验证优化效果 #

修改后重新录制性能面板，查看重渲染的组件数量和耗时，正常优化后点击事件的响应耗时会降到100ms以内。

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