Material UI styled组件重渲染后DOM节点未释放问题求助

使用MUI的styled函数并配置shouldForwardProp选项时，发现每次styled组件重渲染时，DOM节点只增不减，无法被垃圾回收。改用sx prop仅能释放少量节点，大部分仍残留。持续触发重渲染数分钟后，DOM节点数量仍未下降；但使用非styled组件时，节点可正常回收（测试用例参考App.tsx）。

测试场景中DOM节点从150+增长至1500+，实际项目中多个带小步长的MuiSlider会导致节点突破5万，造成应用严重卡顿。不确定是否因styled函数使用方式错误或遗漏关键配置导致该问题，寻求解决方案。

复现步骤 #

• 创建React TypeScript项目：npx create-react-app my-app --template typescript
• 进入项目目录：cd my-app
• 安装MUI相关依赖：npm install @emotion/react @emotion/styled @mui/material
• 将App.tsx替换为指定测试代码
• 启动项目：npm start
• 多次点击页面按钮触发重渲染，通过浏览器性能监控面板观察DOM节点数量变化

排查与解决方案 #

1. 修正shouldForwardProp的实现逻辑 #

shouldForwardProp返回值错误会导致无关props被转发到底层DOM元素，触发不必要的重渲染或DOM节点异常。确保仅排除不需要转发的props：

const StyledDiv = styled('div', {
  // 仅排除自定义的非DOM属性
  shouldForwardProp: (prop) => prop !== 'customProp'
})(({ customProp }) => ({
  backgroundColor: customProp ? 'red' : 'blue'
}));

避免错误返回false（所有props都不转发）或true（所有props都被转发），这两种情况都可能引发DOM节点堆积。

2. 禁止在组件内部定义styled组件 #

若每次组件渲染时都重新创建styled组件，会生成大量独立的样式类和DOM节点，无法被回收。必须将styled组件定义在组件外部：

// 正确：定义在组件外部，仅创建一次
const StyledButton = styled(Button)({
  padding: '8px 16px'
});

function App() {
  const [count, setCount] = useState(0);
  return <StyledButton onClick={() => setCount(count + 1)}>点击{count}次</StyledButton>;
}

错误示例（会导致内存泄漏）：

function App() {
  const [count, setCount] = useState(0);
  // 每次渲染都创建新的StyledButton，生成大量冗余DOM节点
  const StyledButton = styled(Button)({
    padding: '8px 16px'
  });
  return <StyledButton onClick={() => setCount(count + 1)}>点击{count}次</StyledButton>;
}

3. 检查Emotion缓存配置 #

MUI基于Emotion运行，异常的缓存配置可能导致样式节点堆积。可以显式配置Emotion缓存：

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const cache = createCache({
  key: 'mui-custom-cache',
  prepend: true,
});

function App() {
  return (
    <CacheProvider value={cache}>
      {/* 应用根组件 */}
    </CacheProvider>
  );
}

4. 优化MuiSlider的使用方式 #

带小步长的MuiSlider频繁重渲染时，若styled组件嵌套或props传递不当，会加剧节点堆积：

• 将Slider的styled定义移至组件外部
• 使用useMemo缓存Slider的配置项，useCallback缓存事件处理函数，避免不必要的重渲染

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