在反应中呈现页面之前从本地存储中获取主题

Question

我正在使用 react 构建一个小型 Web 应用程序，并且还包含一个 ThemeSwitcher 组件。该组件包含视觉方面，即切换，以及切换主题的脚本和访问本地存储的脚本。然后 ThemeSwitcher 组件被导入到 Header 组件中，而后者又被导入到 index.js 中

当从深色主题（默认）切换到浅色主题时，此信息将保存到本地存储：

let currentTheme = "dark-theme";

function switchTheme() {
        const body = document.querySelector("body");
        const transitionChecker = document.querySelector("#theme-selector");
    
        body.classList.add("transition");
        body.classList.toggle("light-theme");
        transitionChecker.addEventListener("transitionend", () => {
            body.classList.remove("transition");
        });
        currentTheme === "dark-theme"
            ? (currentTheme = "light-theme")
            : (currentTheme = "dark-theme");
    
        localStorage.setItem("storedTheme", currentTheme);
    }

我正在使用以下方法在页面加载时访问此值：

window.addEventListener("load", function () {
    let storedTheme = localStorage.getItem("storedTheme");
    if (storedTheme === "light-theme") switchTheme();
});

这或多或少符合预期。但是，在页面加载时，深色主题会显示片刻，然后切换到浅色主题。

有没有什么方法可以在页面渲染之前抓取想要的主题，避免默认主题闪过？

Answer 1

所以在玩了一些之后，我相信有一个适合我的解决方案。我基本上只是在声明实际组件之前将它放在我的 App.js（在 index.js 中呈现）的开头：

//get stored theme right at the beginning
let currentTheme = localStorage.getItem("storedTheme");
if (!currentTheme) currentTheme = "dark-theme"; // if no theme was stored, set to default --> dark-theme

document.querySelector("body").classList.add(currentTheme);

我是如何得出这个解决方案的：

• 我开始使用 create-react-app，所以切换到 Next.js 不是一个选择
• 尝试使用 setTimeOut 进行一些操作，但无法正常工作
• 尝试使用useEffect()，但这仍然让黑暗主题闪烁 如果之前选择了轻主题，则通过
• 将代码移到实际 App 组件之外，但仍然 在 App.js 中找到它是可行的。

switchTheme() 也被移到 App.js 并位于最后。

不确定这是否是一个正确的解决方案，或者它是否只是让浏览器在实际呈现之前为浏览器提供额外的瞬间来获取存储的主题。但它对我有用。