如何使用React javascript完成登陆网站动画和显示网站主页

Question

​

我想在2-3秒后结束登陆页面动画，并显示主页。那么，我如何结束加载动画并显示它。我能给setTimeOut打电话吗？

出口违约装载机；

Answer 1

首先，我想知道如果页面之前完全加载，为什么要让用户等待2-3秒？我的意思是，这是一个巨大的影响用户体验，我完全不建议这样做。现在的业绩是每一项业务的KPI。

此外，如果您真的想要这样做，我将在父组件中创建一个状态，在其中呈现Loader组件，然后切换到Mainpage组件。对于对服务器的异步请求(这需要2-3秒)，您可以这样想，我们如何模仿呢？使用setTimeout函数，正如您所提到的。

因此，在父组件中，代码应该如下所示：

const ParentComponent = () => {
  const [loading, setLoading] = useState(true) // generally when doing http requests this is false initially and when starting the request you set it to true, but this case is a bit different

  useEffect(() => {setTimeout(() => {setLoading(false)}, 2000)}, []) // this will execute the code inside the effect once the component is rendered - same as componentDidMount() in class-based components.

  return loading ? <Loader /> : <MainPage />

就是这样。

p.d:记住，钩子是在功能组件内部使用的，因为你在它上面使用过它。此外，您也可以将css导入为import "../styles/asd.css"。