切换主题时性能卡顿，修改fontSize后应用无响应如何优化？

你当前实现的性能瓶颈主要来自主题对象变更触发全量组件重渲染，其次是主题对象的重复拷贝和计算开销，可按以下优先级优化：

1. 最高效优化方案：改用CSS变量实现缩放 #

完全避免组件重渲染，调整效率接近原生：

• 提前在全局CSS中定义字体/图标大小的基础偏移变量：

:root {
  --font-size-offset: 0px;
  --icon-size-offset: 0px;
}

• 主题中的尺寸定义直接绑定CSS变量，不需要动态生成主题：

// 原theme.fontSizes直接写死计算逻辑，不需要运行时动态修改
fontSizes: {
  xs: 'calc(12px + var(--font-size-offset))',
  sm: 'calc(14px + var(--font-size-offset))',
  // 其余尺寸规则同理
}

• 调整字体大小时直接修改根元素CSS变量，不需要修改userConfig触发主题重生成：

const handleFontSizeChange = (offset) => {
  document.documentElement.style.setProperty('--font-size-offset', offset + 'px')
  // 仅需要持久化配置时再更新userConfig即可
}

该方案可以完全消除4-5秒的卡顿，不需要修改现有组件的主题消费逻辑。

2. 若必须保留动态主题生成逻辑，按以下步骤优化 #

2.1 缩小useMemo依赖范围 #

当前useMemo依赖整个userConfig对象，只要userConfig任意属性变更都会触发主题重生成，改为只依赖用到的两个字段：

// 单独取值，避免无关属性变更触发无效重计算
const fontSize = useSelector(state => selectUserConfig(state).fontSize)
const iconSize = useSelector(state => selectUserConfig(state).iconSize)
const userTheme = useMemo(() => getUserTheme(fontSize, iconSize), [fontSize, iconSize])

// 调整getUserTheme入参，避免全量传入userConfig
const getUserTheme = (fontSize = 0, iconSize = 0) => {
  // 原有生成逻辑保持不变
}

2.2 降低对象计算开销 #

• 给increaseObjProps添加缓存逻辑，相同输入直接返回缓存结果，避免重复遍历对象：

const objCache = new Map()
function increaseObjProps(obj, value) {
  const cacheKey = `${JSON.stringify(obj)}_${value}`
  if (objCache.has(cacheKey)) return objCache.get(cacheKey)
  const newObj = {}
  for (const key in obj) {
    newObj[key] = typeof obj[key] === 'number' ? obj[key] + value : obj[key]
  }
  objCache.set(cacheKey, newObj)
  return newObj
}

• 如果你的theme对象层级很深、属性很多，每次全量浅拷贝会产生不必要的性能损耗，可以把可变的字体/图标尺寸单独抽离，不需要每次拷贝整个theme对象。

2.3 缩小重渲染范围 #

如果主题是通过Context传递，全量主题变更会触发所有消费Context的组件重渲染：

• 把字体/图标尺寸单独拆分为独立的Context，只有消费这两个属性的组件才会触发重渲染
• 消费主题的组件用React.memo包裹，避免不必要的重渲染
• 若用户是通过滑块连续调整尺寸，添加防抖逻辑，等待用户停止操作后再更新主题，避免连续触发重渲染

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