javascript - Gatsby 1 类组件

Question

我试图理解布局中名为 AppMounted 的组件的逻辑 (Gatsby 1)

import { Component } from 'react';

export default class AppMounted extends Component {
  componentDidMount() {
    /* eslint-disable no-undef */

    // If the body element does not yet contain the "app-mounted" class
    if (!document.body.classList.contains('app-mounted')) {
      // Wait just a little longer
      setTimeout(() => {
        // And then add it
        document.body.classList.add('app-mounted');
      }, 50);
    }
    /* eslint-enable no-undef */
    // 50
  }

  render() {
    return null;
  }
}

然后是body的scss样式

body {
    visibility: hidden;
        &.app-mounted {
            visibility: visible;
       }
}

据我了解，这会等待所有 50 毫秒加载组件/数据，然后显示它们。但如果没有这个组件，一切也能完美运行。问题是它在 Gastby 2 上造成了麻烦并隐藏了一切。通过在 Gastby 2 版本上将其移除，一切又恢复正常。有什么理由需要隐藏尸体然后再次展示吗？

如有任何反馈，我们将不胜感激，谢谢!

Answer 1

该组件似乎试图避免在页面加载时出现无样式的内容。 Gatsby v2+ 肯定没有任何东西需要使用这种模式。您所有的 React 组件都在服务器端呈现并在客户端重新水化。

我强烈建议不要使用这种类型的模式。如果 JavaScript 不执行，则什么都看不到。如果客户端很慢并且 React 需要一段时间来重新水合客户端，则 componentDidMount 调用将延迟远远超过超时中包含的 50 毫秒。在随后访问该页面时，即使所有 Assets 都可能被缓存，该组件也会重新挂载，从而导致不必要的延迟。等等。