React条件导入SCSS切换主题时App.js不重渲染如何解决

问题根因 #

你将ThemeSelector组件定义在了App组件内部，这是不符合React最佳实践的写法。每次App因为mode状态更新触发重渲染时，都会生成一个全新的ThemeSelector函数实例，React Diff算法会将其判定为完全不同的组件，直接销毁旧实例挂载新实例，进而出现主题不更新的异常。

解决方法 #

将ThemeSelector组件移到App组件外部定义，通过props传递mode参数即可：

// 移到App组件外独立定义
const ThemeSelector = ({children, mode}) => {
    return (
        <>
            <React.Suspense fallback={<></>}>
                {(mode === 'LIGHT') && <LightTheme/>}
                {(mode === 'DARK') && <DarkTheme/>}
            </React.Suspense>
            {children}
        </>
    )
}

const App = () => {
  // 放开注释的初始化逻辑，刷新页面可保留之前的主题设置
  const [mode,setMode] = useState(localStorage.getItem('TYPE_OF_THEME') || 'LIGHT');
  console.log('app',mode);

  return (<>
    <ThemeSelector mode={mode}>
        <Router>
            <Switch>
                ...
            </Switch>
        </Router>
    </ThemeSelector>
    </>
)};
const rootElement = document.querySelector('#App');
ReactDOM.render(<App/>, rootElement);

可选优化 #

可以修改切换主题的逻辑，支持明暗模式双向切换：

const handleDarkmode = () => {
    //do some stuffs
    const newMode = props.mode === 'DARK' ? 'LIGHT' : 'DARK'
    props.setMode(newMode);
    localStorage.setItem('TYPE_OF_THEME', newMode);
}

内容的提问来源于stack exchange，提问作者Sébastien LATAIX