React - 等待页面加载的正确方法？答案

【问题标题】：React - correct way to wait for page load?React - 等待页面加载的正确方法？
【发布时间】：2020-05-04 16:20:53
【问题描述】：

在 React JS 中，在触发任何代码之前等待页面加载的正确方法是什么？

场景：登录服务对用户进行身份验证，然后将他们（使用 cookie）重定向到 React 应用程序。然后，React 应用程序会立即搜索 cookie 并根据端点对其进行验证。

但我遇到的问题是，当用户在登录服务中通过身份验证，然后转发到 React App 时，应用程序在加载 cookie 之前加载速度非常快。

触发代码的正确方法是什么？我尝试包装在一个 componentDidMount() 中，没有用！

【问题讨论】：

您是否尝试监听“加载”事件？ stackoverflow.com/a/43739277/3113485
你能展示一些你已经实现的代码吗？

标签： javascript reactjs pageload pageloadstrategy

【解决方案1】：

你可以使用 Suspense 和懒惰 :)

   import React, { Suspense } from 'react';
    
    const OtherComponent = React.lazy(() => import('./OtherComponent'));
    
    function MyComponent() {
      return (
        <div>
          <Suspense fallback={<div>loading...</div>}>
            <OtherComponent />
          </Suspense>
        </div>
      );
    }

【讨论】：

【解决方案2】：

我建议您在应用程序的主要组件（通常是 App.jsx）中使用一个状态来控制加载。当您启动应用程序时，状态将为真，只有在检查完所有您需要检查的内容后，它才会变为假。如果状态正在加载，您将显示一个微调器或您想要的任何内容，当它未加载时，网站：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { loading: true }
    }


    componentDidMount () {
       checkToken()
           .then(() => this.setState({ loading: false });

    }

    if (loading) {
        return <Spinner /> // or whatever you want to show if the app is loading
    }
    return (
        ...rest of you app
    )
}

如果有任何疑问，请告诉我。

【讨论】：