使用Material Switch自动回弹切换多主题的实现及更优方案咨询

实现方案建议 #

方案1：更换为语义匹配的IconButton组件（更推荐） #

Switch组件的原生语义是二元状态切换（开/关），和你「每次点击触发一次循环切换」的需求语义不匹配，用IconButton实现更符合规范，无需强行修改组件原生交互逻辑，示例实现如下：

import React, { useContext } from 'react';
import IconButton from '@material-ui/core/IconButton';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import ThemeContext from '../../../theme/ThemeProvider';
// 可自行选择适配场景的图标，比如Brightness4、RotateRight等
import Brightness4Icon from '@material-ui/icons/Brightness4';

export default function ThemeSwitcherComponent() {
    const { setThemeType, themeName } = useContext(ThemeContext);

    const handleSwitch = () => {
        setThemeType();
    };

    return (
        <FormControlLabel
            labelPlacement="bottom"
            label={themeName}
            control={
                <IconButton onClick={handleSwitch} color="default">
                    <Brightness4Icon />
                </IconButton>
            }
        />
    );
}

方案2：坚持使用Switch组件的正确实现 #

如果必须保留Switch的交互样式，可以监听Switch的所有状态变更事件，每次状态切换都触发主题更新，无需手动重置状态，避免违背组件交互预期：

import React, { useContext, useState } from 'react';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import ThemeContext from '../../../theme/ThemeProvider';

export default function ThemeSwitcherComponent() {
    const { setThemeType, themeName } = useContext(ThemeContext);
    const [checked, setChecked] = useState(false);

    const handleSwitch = (e) => {
        // 先更新Switch自身状态
        setChecked(e.target.checked);
        // 每次状态变更都触发主题切换
        setThemeType();
    };

    return (
        <FormControlLabel
            labelPlacement="bottom"
            label={themeName}
            control={<Switch onChange={handleSwitch} checked={checked} />}
        />
    );
}

主题切换延迟优化 #

5-6秒的切换延迟属于异常问题，可从三个方向排查优化：

• 对ThemeContext的Provider值添加useMemo缓存，避免每次切换主题时全局上下文重新生成导致全量重渲染
• 提前预制所有主题对象，不要在主题切换时动态生成主题配置、计算样式
• 如果主题包含大量全局样式覆盖，可提前将所有主题的样式注入到页面，切换时仅修改根节点的类名匹配对应主题，减少运行时样式计算成本

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