javascript - 丹·阿布拉莫夫的主题转变逻辑

Question

你能解释一下这个window.__onThemeChange函数是如何工作的吗？我试图实现 Dan Abramov 的方法来在 gatsby 应用程序中设置黑暗模式，但我不明白上述功能是如何工作的。首先，它是在 setTheme() 中定义并调用的，并以 newTheme 作为参数。

(function () {
  window.__onThemeChange = function () { };
  function setTheme (newTheme) {
    window.__theme = newTheme;
    preferredTheme = newTheme;
    document.body.className = newTheme;
    window.__onThemeChange(newTheme);
  }
  var preferredTheme;
  try {
    preferredTheme = localStorage.getItem('theme');
  } catch (err) { }
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    try {
      localStorage.setItem('theme', newTheme);
    } catch (err) { }
  }
  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkQuery.addListener(function (e) {
    window.__setPreferredTheme(e.matches ? 'dark' : 'light')
  });
  setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
})();

然后在组件中使用这个函数来设置状态:

    class Layout extends React.Component {
      state = {
        theme: null,
      };
      componentDidMount() {
        this.setState({ theme: window.__theme });
        window.__onThemeChange = () => {
          this.setState({ theme: window.__theme });
        };
      }

这个 window.__onThemeChange 函数刚刚定义，然后仅使用 newTheme 参数在没有主体的情况下调用，然后在 Component 中重新定义作为更改状态的方式。Dan 的存储库链接:

定义的文件: https://github.com/gaearon/overreacted.io/blob/master/src/html.js

组件: https://github.com/gaearon/overreacted.io/blob/master/src/components/Layout.js

Answer 1

我设法弄清楚了。window.__onThemeChange是在html.js(全局文件)中定义的，没有它的主体，然后这个主体在布局组件中定义(以与状态连接)该组件的)，然后从 html.js 再次调用。丹的解决办法令人惊叹。