CSS-in-JS 动态主题切换与首屏渲染优化

动态主题切换的实现方式

1. 使用 CSS 变量（CSS Custom Properties）

CSS 变量是实现主题切换最直接的方式：

:root {
  --primary-color: #4285f4;
  --background-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --primary-color: #8ab4f8;
  --background-color: #1a1a1a;
  --text-color: #f1f1f1;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

JavaScript 切换主题：

function toggleTheme() {
  document.documentElement.setAttribute('data-theme', 
    document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
  );
}

2. CSS-in-JS 实现（以 styled-components 为例）

import styled, { ThemeProvider } from 'styled-components';

const lightTheme = {
  primary: '#4285f4',
  background: '#ffffff',
  text: '#333333'
};

const darkTheme = {
  primary: '#8ab4f8',
  background: '#1a1a1a',
  text: '#f1f1f1'
};

const Button = styled.button`
  background: ${props => props.theme.primary};
  color: ${props => props.theme.text};
`;

function App() {
  const [theme, setTheme] = useState(lightTheme);
  
  const toggleTheme = () => {
    setTheme(theme === lightTheme ? darkTheme : lightTheme);
  };

  return (
    <ThemeProvider theme={theme}>
      <Button onClick={toggleTheme}>Toggle Theme</Button>
    </ThemeProvider>
  );
}

提升首屏渲染效率的策略

1. 关键 CSS 提取

// 使用 styled-components 的 ServerStyleSheet 提取关键 CSS
import { ServerStyleSheet } from 'styled-components';

const sheet = new ServerStyleSheet();
const html = renderToString(sheet.collectStyles(<App />));
const styleTags = sheet.getStyleTags(); // 插入到 HTML 的 head 中

2. 代码分割与按需加载

import React, { lazy, Suspense } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

3. 使用 CSS 变量替代动态样式

CSS 变量的性能优于 JavaScript 动态计算样式：

// 不推荐 - 性能较差
const DynamicDiv = styled.div`
  color: ${props => props.color};
`;

// 推荐 - 使用 CSS 变量
const DynamicDiv = styled.div`
  color: var(--dynamic-color);
`;
// 使用时
<DynamicDiv style={{ '--dynamic-color': props.color }} />

4. 避免不必要的重新渲染

// 使用 React.memo 避免不必要的重新渲染
const ThemedButton = React.memo(styled.button`
  background: ${props => props.theme.primary};
`);

CSS 变量如何解决这些问题

1. 主题切换性能优化

CSS 变量在浏览器层面实现样式更新，避免了 JavaScript 的样式计算和 DOM 操作：

// 只需改变根元素的变量值
document.documentElement.style.setProperty('--primary-color', newColor);

2. 首屏渲染优化

CSS 变量：

• 可以被预解析，浏览器可以更快地构建渲染树

• 减少 CSS-in-JS 运行时生成的样式表大小

• 支持服务器端渲染，不会产生样式闪烁

3. 动态样式与静态样式的分离

/* 静态部分编译时确定 */
.button {
  padding: 8px 16px;
  border-radius: 4px;
  /* 动态部分通过变量控制 */
  background: var(--button-bg, #eee);
  color: var(--button-color, #333);
}

4. 主题持久化示例

结合 localStorage 实现主题持久化：

// 初始化主题
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

// 切换主题并保存
function toggleTheme() {
  const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

性能对比

最佳实践推荐：使用 CSS 变量定义主题色，结合 CSS-in-JS 管理组件样式，既能保证性能又能维护良好的开发体验。