数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究ReactJS 中的 Suspense
在本文中，我们将学习如何在组件延迟加载时显示加载程序。
当组件进行延迟加载时，需要显示一个回退内容来指示正在 DOM 中加载该组件。
语法
<Suspense>
示例
在该示例中，我们将构建一个路由应用程序，该应用程序延迟加载组件，并在组件延迟加载时显示加载程序。
App.jsx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Loader from './Loader.js';
const Contact = lazy(() => import('./Contact'));
const App = () => (
<Router>
<Suspense fallback={<Loader />}>
<Route exact path="/contact" component={Contact} />
<Route
path="/"
exact
render={() => (
<div>
<h1>TutorialsPoint</h1>
<a href="/contact">Contact Us</a>
</div>
)}
/>
</Suspense>
</Router>
);
export default App;Contact.js
import React from 'react';
const Contact = () => {
return (
<div>
<h1>Contact Us</h1>
<h4>You already know us</h4>
</div>
);
};
export default Contact;Loader.js
import React from 'react';
const Loader = () => {
return <div>Please wait...</div>;
};
export default Loader;在上述示例中，当组件正在延迟加载时，加载程序组件作为该组件的回退内容加载到 DOM 中。
输出
这将产生以下结果。
更新于：2021 年 3 月 19 日
1 千次以上浏览
广告