跳至主要內容

react内置组件

程序员王天大约 1 分钟

Suspense

  • 组件加载时的占位符-用于懒加载
  • 属性 fallback

组件尚未加载完成时,会显示 fallback 属性中指定的组件内容,用于展示加载状态。一旦数据加载完成,组件会被显示,并以更新后的数据渲染内容
一般搭配 lazy() 函数,用 suspense 组件包裹住 懒加载组件,在加载过程中展示 suspense 中的占位内容。

场景

当我们在 React 中构建应用程序时,有时某些组件的加载可能需要一些时间。为了提供更好的用户体验,我们可以使用 Suspense 组件。
Suspense 组件的作用是在组件加载过程中显示一些备用内容,例如加载指示器或占位符。它的使用场景包括代码分割和懒加载。

使用方法:

  1. 导入所需的依赖:import React, { Suspense } from 'react';
  2. 使用 React.lazy()动态加载需要延迟加载的组件:const MyComponent = React.lazy(() => import('./MyComponent'));
  3. 在渲染处使用 Suspense 组件,并设置 fallback 属性来指定备用内容:<Suspense fallback={<div>Loading...</div>}>...</Suspense>
  4. 将需要延迟加载的组件放置在 Suspense 组件内部:<MyComponent />

示例代码:

import React, { Suspense } from "react";

const MyComponent = React.lazy(() => import("./MyComponent"));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;

在上述示例中,MyComponent 是一个需要延迟加载的组件。使用 Suspense 组件将 MyComponent 包裹起来,当组件加载时,会显示指定的备用内容,即<div>Loading...</div>。一旦组件加载完成,它将替换备用内容,显示真正的组件内容。

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com