React中用函数动态生成样式表适配暗黑模式是否为不良实践？

问题背景 #

要实现控制中心切换暗黑模式时UI同步更新，在找不到合适方案后，决定放弃静态样式表，改用函数返回样式表的方式实现。现需明确两个核心问题：

• 该方案是否属于不良实践？
• 项目包含大量样式时，是否存在性能问题？

方案合理性与性能分析 #

是否属于不良实践？ #

这种动态生成样式表的方式不属于不良实践，是React生态中处理主题切换的常见方案之一——核心思路是通过主题上下文（ThemeContext）传递当前主题状态，动态匹配对应样式。但需注意写法优化，避免不必要的重复计算。

性能问题分析 #

你当前的写法存在潜在性能隐患：

1. 重复执行StyleSheet.create：组件每次渲染（包括主题变化、父组件重渲染触发的渲染）时，styles(theme)都会重新调用StyleSheet.create，对于包含大量样式的组件，会重复创建样式对象，增加JS线程的计算开销。
2. 基础样式重复生成：第一种写法中BaseStyle.container(theme)每次调用都会执行StyleSheet.create，进一步放大性能损耗。

优化方案 #

核心思路是用useMemo缓存已生成的样式表，结合全局样式缓存，避免重复计算：

优化后的组件写法 #

import React, { useContext, useMemo } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { getBaseStyle } from '../../styles';
import { ThemeContext } from '../Contexts/ThemeContext';

const MyComponent = (props) => {
  const theme = useContext(ThemeContext);

  // 仅在theme变化时重新生成组件样式
  const componentStyles = useMemo(() => {
    const baseStyles = getBaseStyle(theme);
    return StyleSheet.create({
      container: {
        ...baseStyles.container,
        opacity: 0.5,
      },
      // 其他组件专属样式...
    });
  }, [theme]);

  return (
    <View style={componentStyles.container}>
      <Text>Hello!</Text>
    </View>
  );
};

基础样式的全局缓存优化 #

// styles.js
import { StyleSheet } from 'react-native';
import Colors from './Colors';

// 缓存已生成的主题样式，避免重复创建
const cachedBaseStyles = {};

export const getBaseStyle = theme => {
  if (!cachedBaseStyles[theme]) {
    cachedBaseStyles[theme] = StyleSheet.create({
      container: {
        width: '100%',
        height: '100%',
        backgroundColor: theme === 'dark' ? Colors.DARK : Colors.WHITE,
      },
      // 其他全局基础样式...
    });
  }
  return cachedBaseStyles[theme];
};

额外注意点 #

• 把主题相关的颜色、间距等抽离成单独的主题配置对象（如darkTheme、lightTheme），直接引用而非在样式中动态判断，减少计算量。
• 全局通用样式可在主题切换时一次性生成，而非每个组件单独处理，进一步降低重复计算。

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