React中如何在页面渲染前读取localStorage主题避免默认主题闪烁

问题原因 #

你当前的主题读取逻辑绑定了window.load事件，该事件需要等页面所有DOM、样式、图片、资源全部加载完成后才会触发，此时页面已经完成了默认dark主题的第一次渲染，切换时自然会出现闪现。

解决方法 #

1. 提前执行主题判断逻辑 #

在你的项目入口HTML文件（通常是public/index.html）的<head>标签最顶部，插入一段内联脚本：

<head>
  <!-- 放在所有CSS、其他脚本之前 -->
  <script>
    const storedTheme = localStorage.getItem('storedTheme')
    if (storedTheme === 'light-theme') {
      document.body.classList.add('light-theme')
    }
  </script>
  <!-- 后面原本的meta、CSS、script等内容保持不变 -->
</head>

这段脚本会在浏览器解析DOM的第一时间同步执行，此时页面还没有开始渲染内容，添加的主题类会在首次渲染时直接生效，从根源避免闪现。

2. 同步组件内的主题初始值 #

修改你ThemeSwitcher组件内的currentTheme初始化逻辑，和HTML端的判断保持一致，避免后续切换逻辑出错：

// 原来的默认值写法替换为下面的
let currentTheme = localStorage.getItem("storedTheme") || "dark-theme";

3. 移除冗余逻辑 #

删掉原来绑定window.load事件的主题读取代码，避免逻辑重复执行。

可选优化：避免初始过渡干扰 #

如果你的主题切换带过渡动画，担心初始阶段仍有动画残留，可以加一段CSS兜底：

/* 默认禁用过渡，避免渲染初期的动画闪烁 */
body {
  transition: none !important;
}
/* 页面完全加载后恢复过渡效果 */
body.theme-ready {
  transition: background-color 0.3s ease, color 0.3s ease /* 替换为你实际的过渡配置 */;
}

然后在React应用挂载完成后给body添加theme-ready类即可。

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