面试题：Next.js的Sass支持下，如何实现动态样式切换且保证性能最优？

实现思路

状态管理：

使用React的useState钩子来管理用户的主题选择状态。例如：

import React, { useState } from'react';

const ThemeSwitcher = () => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  const handleThemeSwitch = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  return (
    <div>
      <button onClick={handleThemeSwitch}>
        {isDarkTheme? '切换到白天模式' : '切换到夜间模式'}
      </button>
    </div>
  );
};

export default ThemeSwitcher;

样式切换：

利用CSS变量：在Sass中定义不同主题的CSS变量。例如，在styles/theme.scss文件中：

:root {
  // 白天模式变量
  --text-color: #000;
  --bg-color: #fff;
}

body.dark-theme {
  // 夜间模式变量
  --text-color: #fff;
  --bg-color: #000;
}

应用样式：在组件中，根据isDarkTheme状态为body元素添加或移除dark - theme类名。例如，在_app.js中：

import React from'react';
import type { AppProps } from 'next/app';
import 'styles/theme.scss';

const MyApp = ({ Component, pageProps }: AppProps) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  return (
    <body className={isDarkTheme? 'dark - theme' : ''}>
      <Component {...pageProps} />
    </body>
  );
};

export default MyApp;

组件内样式：在组件中使用这些CSS变量。例如，在styles/Button.scss中：

button {
  color: var(--text-color);
  background - color: var(--bg-color);
}

利用Next.js内置的Sass支持

安装依赖：确保项目中安装了sass和node - sass（Next.js默认使用node - sass）。可以通过npm install sass node - sass安装。
配置Sass：Next.js对Sass有内置支持，无需额外复杂配置。只需将Sass文件命名为.scss或.sass，并按照常规方式导入使用，如import 'styles/theme.scss';。

优化手段

CSS提取和代码分割：Next.js会自动提取CSS并进行代码分割。这意味着在页面加载时，只会加载当前页面所需的CSS，而不是整个应用的CSS，提高加载性能。
SSR（服务器端渲染）/SSG（静态站点生成）：
- SSR：利用Next.js的SSR能力，在服务器端生成带有正确主题样式的HTML。这样可以减少客户端的渲染工作，加快首屏加载速度。
- SSG：对于不需要实时数据更新的页面，可以使用SSG。在构建时生成静态HTML文件，并根据主题生成不同版本，进一步优化性能。

节流与防抖：如果主题切换按钮可能会被快速点击，可以使用节流或防抖技术。例如，使用lodash的debounce函数来防止频繁切换样式导致的性能问题。

import React, { useState } from'react';
import debounce from 'lodash/debounce';

const ThemeSwitcher = () => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  const handleThemeSwitch = debounce(() => {
    setIsDarkTheme(!isDarkTheme);
  }, 300);

  return (
    <div>
      <button onClick={handleThemeSwitch}>
        {isDarkTheme? '切换到白天模式' : '切换到夜间模式'}
      </button>
    </div>
  );
};

export default ThemeSwitcher;

预加载和预渲染：在用户可能切换主题之前，可以预加载另一个主题的样式资源，减少切换时的等待时间。Next.js的next/link组件的prefetch属性可以用于预加载页面资源，也可以类似地考虑预加载主题相关的样式资源。

星途面试题库

面试题：Next.js的Sass支持下，如何实现动态样式切换且保证性能最优？

知识考点

面试题答案

实现思路

利用Next.js内置的Sass支持

优化手段