反应-显示加载屏幕，而DOM是渲染?

这是一个来自谷歌Adsense应用页面的例子。加载界面显示在主界面之前。

我不知道如何用React做同样的事情，因为如果我用React组件渲染加载屏幕，它不会在页面加载时显示，因为它必须等待DOM渲染之前。

更新:

我通过将屏幕加载器放在index.html中并在React componentDidMount()生命周期方法中删除它来举例说明我的方法。

示例和反应加载屏幕。

当前回答

我还使用了@Ori Drori的答案，并设法让它起作用。随着React代码的增长，客户端浏览器在第一次访问时必须下载的编译包也会增加。如果你处理不好，这会带来用户体验问题。

我添加到@Ori回答是添加和执行onload函数在index.html的onload属性的主体标签，以便加载器消失后，一切都已完全加载在浏览，见下面的代码片段:

<html>
  <head>
     <style>
       .loader:empty {
          position: absolute;
          top: calc(50% - 4em);
          left: calc(50% - 4em);
          width: 6em;
          height: 6em;
          border: 1.1em solid rgba(0, 0, 0, 0.2);
          border-left: 1.1em solid #000000;
          border-radius: 50%;
          animation: load8 1.1s infinite linear;
        }
        @keyframes load8 {
          0% {
           transform: rotate(0deg);
          }
          100% {
           transform: rotate(360deg);
          }
        }
     </style>
     <script>
       function onLoad() {
         var loader = document.getElementById("cpay_loader");loader.className = "";}
     </script>
   </head>
   <body onload="onLoad();">
     more html here.....
   </body>
</html>

2020-02-17 06:30:48

其他回答

在componentDidMount中设置超时工作，但在我的应用程序中，我收到了内存泄漏警告。试试这样的方法。

constructor(props) {
    super(props)
    this.state = { 
      loading: true,
    }
  }
  componentDidMount() {
    this.timerHandle = setTimeout(() => this.setState({ loading: false }), 3500); 
  }

  componentWillUnmount(){
    if (this.timerHandle) {
      clearTimeout(this.timerHandle);
      this.timerHandle = 0;
    }
  }

2018-07-23 00:30:40

解决这个问题的方法是在你的渲染函数中这样做:

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

在构造函数中将isLoading初始化为true，在componentDidMount上将其初始化为false。

2016-12-06 05:46:23

这个问题可以通过React的lazy特性轻松解决。

import { Suspense, lazy } from "react"
import Loading from "components/Loading"

const Dashboard = lazy(() => import("containers/Dashboard"))

const App = () => (
  <Suspense fallback={<Loading />}>
    <Dashboard />
  </Suspense>
)

export default App

当仪表板组件仍在加载时，加载组件将显示出来。

2021-10-01 09:28:41

在公用文件夹中编辑index.html文件的位置。复制你的图像到相同的位置index.html在公共文件夹。然后将index.html中包含<div id="root"> </div>标签的部分内容替换为下面给定的html代码。

<div id="root">  <img src="logo-dark300w.png" alt="Spideren" style="vertical-align: middle; position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Half the height */
   margin-left: -250px; /* Half the width */" />  </div>

在加载过程中，Logo现在将出现在页面中间。并将在几秒钟后被React替换。

2019-02-12 10:02:57

现在我们也可以在React 16.8中使用钩子:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [ spinner, setSpinner ] = useState(true);

  // It will be executed before rendering

  useEffect(() => {
    setTimeout(() => setSpinner(false), 1000)
  }, []);

  // [] means like componentDidMount

  return !spinner && <div>Your content</div>;
};

export default App;

2019-04-05 15:38:06

反应-显示加载屏幕，而DOM是渲染?

推荐文章

最新文章

标签