这是一个来自谷歌Adsense应用页面的例子。加载界面显示在主界面之前。
我不知道如何用React做同样的事情，因为如果我用React组件渲染加载屏幕，它不会在页面加载时显示，因为它必须等待DOM渲染之前。
更新:
我通过将屏幕加载器放在index.html中并在React componentDidMount()生命周期方法中删除它来举例说明我的方法。
示例和反应加载屏幕。
当前回答
那么使用速度呢?
使用这里的链接地址。
https://github.hubspot.com/pace/docs/welcome/
1.在他们的网站上选择你想要的样式并粘贴在index.css中
2.复制Pace Js的链接并添加到public/index.html中的脚本标签中
3.它会自动检测网页负载，并在浏览器顶部显示速度。
你也可以在css中修改高度和动画。
其他回答
你可以通过在react中使用惰性加载轻松做到这一点。 为此你必须使用惰性和悬疑反应。
import React, { lazy, Suspense } from 'react';
const loadable = (importFunc, { fallback = null } = { fallback: null }) => {
const LazyComponent = lazy(importFunc);
return props => (
<Suspense fallback={fallback}>
<LazyComponent {...props} />
</Suspense>
);
};
export default loadable;
然后像这样导出你的组件。
export const TeacherTable = loadable(() =>
import ('./MainTables/TeacherTable'), {
fallback: <Loading />,
});
然后在你的路由文件中像这样使用它。
<Route exact path="/app/view/teachers" component={TeacherTable} />
这就是现在你很好去每次你的DOM渲染你的加载组件将显示为我们已经在上面的fallback属性中指定。只要确保你只在componentDidMount()中做任何ajax请求
最重要的问题是:“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语句。
The starting of react app is based on the main bundle download. React app only starts after the main bundle being downloaded in the browser. This is even true in case of lazy loading architecture. But the fact is we cannot exactly state the name of any bundles. Because webpack will add a hash value at the end of each bundle at the time when you run 'npm run build' command. Of course we can avoid that by changing hash settings, but it will seriously affect the cache data problem in the Browser. Browsers might not take the new version because of the same bundle name. . we need a webpack + js + CSS approach to handle this situation.
更改public/index.html如下所示
<!DOCTYPE html> <html lang="en" xml:lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <style> .percentage { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; border: 1px solid #ccc; background-color: #f3f3f3; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1.1em solid rgba(0, 0, 0, 0.2); border-radius: 50%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .innerpercentage { font-size: 20px; } </style> <script> function showPercentage(value) { document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%"; } var req = new XMLHttpRequest(); req.addEventListener("progress", function (event) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total; showPercentage(percentComplete) // ... } else { document.getElementById('percentage').innerHTML = "Loading.."; } }, false); // load responseText into a new script element req.addEventListener("load", function (event) { var e = event.target; var s = document.createElement("script"); s.innerHTML = e.responseText; document.documentElement.appendChild(s); document.getElementById('parentDiv').style.display = 'none'; }, false); var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>"; req.open("GET", bundleName); req.send(); </script> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>App Name</title> <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet"> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="parentDiv" class="percentage"> <div id="percentage" class="innerpercentage">loading</div> </div> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
在你的webpack产品配置中，将HtmlWebpackPlugin选项改为如下
new HtmlWebpackPlugin({
inject: false,
...
您可能需要使用'eject'命令来获取配置文件。最新的webpack可能有选项配置HtmlWebpackPlugin而不弹出项目。
我不知道现在回答是否太晚，因为你可能已经找到了解决方案，但这里有一个来自我的观点，因为这个问题真的很有用。： 我在scrimba.com上上了一堂课，在这里，老师从课堂开始，然后开始讲课。他通过课堂和状态来教授API调用。这是他的代码:
import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
loading: false,
character: {}
}
}
componentDidMount() {
this.setState({loading: true})
fetch("https://swapi.dev/api/people/1/")
.then(response => response.json())
.then(data => {
this.setState({
loading: false,
character: data
})
})
}
render() {
const text = this.state.loading ? "loading..." : this.state.character.name
return (
<div>
<p>{text}</p>
</div>
)
}
}
export default App
这很直接，在开始时将加载状态设置为true并保持它，直到接收到数据，然后当接收到数据时，更改状态并将加载设置为false并显示内容。 现在我试着用钩子，作为练习，它工作得很顺利!一个简单而有效的解决方案。这是我的代码:
import React, {useState,useEffect} from 'react'
function App()
{
const [response, setResponse] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchResponse() ;
} , []);
const fetchResponse = async () => {
const data = await fetch("https://swapi.dev/api/people/1/");
const response = await data.json();
setResponse(response);
console.log(response.name);
setLoading(false);
}
const content = loading ? <i className="fas fa-atom fa-spin"></i> : <h1>{response.name}</h1>
return(
<section id="w-d-p">
{content}
</section>
)
}
export default App;
钩子也是一样的逻辑。在数据加载时，我得到了漂亮的转轮然后，我的数据!
哦，顺便说一下，如果你不喜欢这个XD，你可以在fetch中放入自己的API。
只要在<div id="root"></div>标签内添加内容，你就应该很好了!
// Example:
<div id="root">
<div id="pre-loader">
<p>Loading Website...</p>
<img src="/images/my-loader.gif" />
</div>
</div>
一旦<App />被加载，React会自动忽略<div id="root">标签内的所有内容，用你实际的应用程序覆盖它!
推荐文章
- 如何配置历史记录?
- 如何在Redux应用程序中动态加载代码分割的减速器?
- React钩子:从回调中访问最新状态
- 同步和异步编程(在node.js中)的区别是什么?
- React-Native:应用程序未注册错误
- ReactJS和公共文件夹中的图像
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- React组件中使用TypeScript的默认属性值
- 反应钩子-正确的方式清除超时和间隔
- 在React.js中正确的img路径
- 在React.js中更新组件onScroll的样式
- onClick ReactJS调用多个函数
- 为什么React 16中的Fragments比容器div更好?
- 在Redux应用程序中哪里写localStorage ?
