React-等待页面加载的正确方式

Question

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

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

但我遇到的问题是，当用户在登录服务处进行身份验证，然后转发到React应用程序时，应用程序在加载cookie之前加载得太快了。

激发代码的正确方法是什么？我试着用组件DidMount((包装，但没有成功！

Answer 1

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

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
)
}

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

Answer 2

您可以使用Suspense和lazy:(

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<div>
<Suspense fallback={<div>loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}

Answer 3

将其添加到UI树中的某个位置(可能将其添加在根组件本身中(

// will run once, after app has loaded
useEffect(() => {
// your code here
}, []);