javascript - 如何确保我的第一个 React 渲染具有来自 localStorage 的值？

Question

我的网站有浅色和深色主题。默认主题是 light。如果用户将主题更改为 dark，它会保存到 localStorage。

下次访问/刷新我的组件树的根时，此代码运行:

  useLayoutEffect(() => {
    let storedTheme = localStorage.getItem("theme");

    if (storedTheme === "light" || storedTheme === "dark") {

    // Redux action. Other components subscribe to the theme.
      setTheme(storedTheme);
    }
  }, [setTheme]);

假设用户选择深色主题作为他们的偏好。它工作正常。但是，第一个渲染将是浅色主题。第二个渲染将是深色主题。这会在访问该站点时导致从亮到暗的闪烁。

有没有办法确保我的第一个渲染具有来自 localStorage 的设置值？

Answer 1

如下实现主题保存到本地存储。

const [storedTheme, setStoredTheme] = useState(JSON.parse(localStorage.getItem("theme")) || "light");


useEffect(() => {
    localStorage.setItem("theme", JSON.stringify(storedTheme));
}, [storedTheme]);

然后在 App UI 中使用方法 setStoredTheme() 将主题设置为“light”或“dark”。