Code
2024-11-19 07:00:05

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

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

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

更新:

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

示例和反应加载屏幕。

当前回答

这是我基于答案的实现

/公共/ 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

其他回答

这将发生在ReactDOM.render()控制根目录<div>之前。也就是说，你的应用程序到那时还没有被安装。

所以你可以把你的加载器添加到index.html文件的根目录<div>。在React接管之前，这将在屏幕上可见。

您可以使用任何最适合您的加载器元素(例如带有动画的svg)。

您不需要在任何生命周期方法上删除它。React会用你渲染的<App/>替换它的根<div>的所有子元素，就像我们在下面的动图中看到的那样。

关于CodeSandbox的例子

index . html

<head>
  <style>
    .svgLoader {
      animation: spin 0.5s linear infinite;
      margin: auto;
    }
    .divLoader {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="divLoader">
      <svg class="svgLoader" viewBox="0 0 1024 1024" width="10em" height="10em">
        <path fill="lightblue"
          d="PATH FOR THE LOADER ICON"
        />
      </svg>
    </div>
  </div>
</body>

index.js

在ReactDOM.render()运行之前，使用调试器检查页面。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

debugger; // TO INSPECT THE PAGE BEFORE 1ST RENDER

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
2019-05-08 18:19:32

当你的React应用程序是巨大的，它真的需要时间来启动和运行后，页面已经加载。比如，你将应用的React部分挂载到#app上。通常，index.html中的这个元素只是一个空的div:

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

你可以做的是放一些样式和一堆图像，让它在页面加载和初始React应用程序渲染到DOM之间看起来更好:

<div id="app">
  <div class="logo">
    <img src="/my/cool/examplelogo.svg" />
  </div>
  <div class="preload-title">
    Hold on, it's loading!
  </div>
</div>

页面加载后，用户将立即看到index.html的原始内容。不久之后，当React准备好将呈现的组件的整个层次结构挂载到这个DOM节点时，用户将看到实际的应用程序。

注意class，而不是className。这是因为你需要把它放到html文件中。

如果你使用SSR，事情就不那么复杂了，因为用户会在页面加载后立即看到真正的应用程序。

2016-12-06 05:55:22

我使用的是react-progress-2 npm包，它是零依赖的，在ReactJS中工作得很好。

https://github.com/milworm/react-progress-2

安装:

NPM安装react-progress-2

在项目中包含react-progress-2/main.css。

导入“node_modules / react-progress-2 / main.css”;

包括react-progress-2，并把它放在顶部组件的某个地方，例如:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

现在，无论何时你需要显示一个指示器，只需调用Progress.show()，例如:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

请注意，show和hide调用是堆叠的，因此在n个连续的show调用之后，您需要执行n个hide调用来隐藏一个指示器，或者您可以使用Progress.hideAll()。

2018-05-23 20:59:45

最重要的问题是:“loading”是什么意思?如果你谈论的是被安装的物理元素，这里的一些第一个答案很好。然而，如果你的应用做的第一件事是检查身份验证，你真正加载的是来自后端的数据，用户是否传递了一个cookie，标签他们是授权或未授权的用户。

这是基于redux的，但你可以很容易地将其更改为普通的反应状态模型。

行动的创造者:

export const getTodos = () => {
  return async dispatch => {
    let res;
    try {
      res = await axios.get('/todos/get');

      dispatch({
        type: AUTH,
        auth: true
      });
      dispatch({
        type: GET_TODOS,
        todos: res.data.todos
      });
    } catch (e) {
    } finally {
      dispatch({
        type: LOADING,
        loading: false
      });
    }
  };
};

最后一部分意味着无论用户是否被授权，在收到响应后加载屏幕都会消失。

下面是加载它的组件的样子:

class App extends Component {
  renderLayout() {
    const {
      loading,
      auth,
      username,
      error,
      handleSidebarClick,
      handleCloseModal
    } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      ...
    );
  }

  ...

  componentDidMount() {
    this.props.getTodos();
  }

...

  render() {
    return this.renderLayout();
 }

}

如果状态。加载是真实的，我们总是会看到加载屏幕。在componentDidMount上，我们调用getTodos函数，它是一个转换状态的动作创建器。当我们得到一个响应(这可能是一个错误)加载假。我们的组件更新，再次调用渲染，这一次没有加载屏幕，因为if语句。

2019-04-04 16:32:24

在公用文件夹中编辑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

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1