移动设备上的无限加载时间

Question

我正在尝试显示加载程序直到页面完成呈现，为此我使用了以下代码：

export default function App() {
  const [isLoading, setIsLoading] = React.useState(true);

  const handleLoading = () => {
    setIsLoading(false);
  };

  useEffect(() => {
    window.addEventListener('load', handleLoading);
    return () => window.removeEventListener('load', handleLoading);
  }, []);

  return (
    <div>
      {isLoading ? (
        <Load />
      ) : (
        <div className="app">
          <Topbar />
          <div className="parts">
            <Intro />
            <About />
            <Projects />
            <Contact />
          </div>
        </div>
      )}
    </div>
  );
}

除隐身模式和移动设备外，这在桌面设备上运行良好。它永远显示加载程序，当我按两次刷新按钮时，页面才会出现。我在 gtmetrix 上测试了网站，但我收到了这个错误：Lighthouse Error: The page did not paint any content。我该如何解决？

Answer 1

useEffect 会在你的状态改变时被调用，对吧？

那你觉得你的useEffect什么时候会被调用？

组件已创建，加载状态已设置为 true，一切正常，为什么您的组件会在状态未发生变化时调用您的 useEffect？

我有两个建议：

删除您的 'load' 事件侦听器并将其添加到您的主要功能代码中，这样事件侦听器将被启动。然后当页面加载时，它会将您的状态设置为 false，因此您的 useEffect 将被调用，并且它会删除事件侦听器。
是使用基于 class 的组件和生命周期挂钩，这些组件专为您正在尝试做的事情而设计。

Answer 2

我不确定 eventListener 在您的情况下是否正常工作，但如果我是您，我会简单地在 useEffect 中设置 IsLoading(false) 并且如果您希望它在组件安装之前停止，您可以通过这种方式进行：

export default function App() {
const [isLoading, setIsLoading] = React.useState(true);
const [mounted,setMounted] = React.useState(false);

if(!mounted) setIsLoading(false)

useEffect(() => {
    setMounted(true)
}, []);

return (
    <div>
        {isLoading ? (
            <Load />
        ) : (
            <div className="app">
                <Topbar />
                <div className="parts">
                    <Intro />
                    <About />
                    <Projects />
                    <Contact />
                </div>
            </div>
        )}
    </div>
);

}

希望对您有所帮助 ;)

移动设备上的无限加载时间

Infinite load time on mobile device

javascript

reactjs

react-state