reactjs - 在我的所有组件都安装在 React 中之前如何有一个加载屏幕

Question

我的 React 应用程序没有任何 API 调用，我希望在安装所有组件(包括所有子组件)时有一个加载页面。我的页面确实需要几秒钟才能加载。

我遇到的问题是我不想使用 setTimeout，因为我的页面可以加载任意秒数。我只想显示一个加载屏幕，直到我的实际页面准备好显示。

Answer 1

试试 load像这样的事件(假设你在谈论 react Hook 实现。):-

const Component = () => {
const [isLoading, setIsLoading] = React.useState(true);

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

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

return !isLoading ? (
{*/ your content here */}
):({*/ your loader */})

}