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

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

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

更新:

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

示例和反应加载屏幕。

当前回答

这可以通过在html文件(例如index.html)中放置加载图标来实现，这样用户就可以在html文件加载后立即看到图标。

当你的应用程序完成加载时，你可以简单地删除生命周期钩子中的加载图标，我通常在componentDidMount中这样做。

2016-12-06 05:51:59

其他回答

我最近不得不处理这个问题，并想出了一个解决方案，这对我来说很好。然而，我已经尝试了上面的@Ori Drori解决方案，不幸的是，它并没有正确工作(有一些延迟+我不喜欢setTimeout函数的使用)。

这是我想到的:

index . html文件

内头标签-指示器的样式:

<style media="screen" type="text/css">

.loading {
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  background-color: black;
  border-radius: 100%;
  height: 6em;
  width: 6em;
}

.container {
  align-items: center;
  background-color: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    transform: scale(1.0);
  }
}

</style>

现在是body标签:

<div id="spinner" class="container">
  <div class="loading"></div>
</div>

<div id="app"></div>

然后是一个非常简单的逻辑，在app.js文件中(在渲染函数中):

const spinner = document.getElementById('spinner');

if (spinner && !spinner.hasAttribute('hidden')) {
  spinner.setAttribute('hidden', 'true');
}

它是如何工作的?

当第一个组件(在我的应用程序中，大多数情况下是app.js)正确安装时，旋转器将被隐藏，并应用隐藏属性给它。

更重要的是补充什么- spinner. hasattribute ('hidden')条件阻止在每次组件挂载时向spinner添加隐藏属性，因此实际上它只会在整个应用程序加载时添加一次。

2017-10-18 10:28:13

在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

如果你使用react-router来管理你的应用程序的路由，你可以很容易地添加加载屏幕与我做的react-router加载库。

它也会影响页面切换，但我认为，如果你想预装第一页，自然也会预装其他页面。

这个方法和悬疑方法的区别在于，有了这个库，你可以在获取数据的同时继续加载。基本上，这个方法非常类似于在组件中使用isLoading状态，但是如果您有很多不同的页面，则更容易实现。

使用

在路由器部分，从react-router-loading导入Switch和Route，而不是从react-router-dom导入

import { Switch, Route } from "react-router-loading";

<Switch>
    <Route path="/page1" component={Page1} />
    <Route path="/page2" component={Page2} />
    ...
</Switch>

在切换前必须加载的每条路线上添加加载道具

<Switch>
    // data will be loaded before switching
    <Route path="/page1" component={Page1} loading />

    // instant switch as before
    <Route path="/page2" component={Page2} />
    ...
</Switch>

在加载道具路由中提到的组件的初始加载方法的末尾添加loadingContext.done()(在这种情况下是Page1)

import { LoadingContext } from "react-router-loading";
const loadingContext = useContext(LoadingContext);

const loading = async () => {
    // loading some data

    // call method to indicate that loading is done and we are ready to switch
    loadingContext.done();
};

你可以指定加载屏幕，将显示在你的应用程序的第一次加载

const MyLoadingScreen = () => <div>Loading...</div>

<Switch loadingScreen={MyLoadingScreen}>
...
</Switch>

2021-10-02 12:20:22

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

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

这是我基于答案的实现

/公共/ index . html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>React App</title>
  <style>
    .preloader {
      display: flex;
      justify-content: center;
    }

    .rotate {
      animation: rotation 1s infinite linear;
    }

    .loader-hide {
      display: none;
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(359deg);
      }
    }
  </style>
</head>

<body>
  <div class="preloader">
    <img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
  </div>
  <div id="root"></div>
</body>

</html>

/ src / app.js

import React, { useEffect } from "react";

import "./App.css";

const loader = document.querySelector(".preloader");

const showLoader = () => loader.classList.remove("preloader");
const addClass = () => loader.classList.add("loader-hide");

const App = () => {
  useEffect(() => {
    showLoader();
    addClass();
  }, []);
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <h2>App react</h2>
    </div>
  );
};

export default App;

2020-08-22 05:43:49

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

推荐文章

最新文章

标签