React 如何实现骨架屏的展示-Suspense?

React新增了一个功能 Suspense组件,帮助我们“等待”目标代码加载,并且可以直接指定一个加载的界面(像是个 spinner),让它在用户等待的时候显示

一、引入 Suspense

import React, { Component, Suspense } from "react";

二、使用 Suspense

<Suspense fallback={null}>
    {/* 加载的内容 */}
    <div>加载的内容</div>
</Suspense>

  

三、⚠️ 注意的点

  1. 仅处理界面的交互,与接口数据加载快慢无关
  2. 使用 Suspense 必须搭配 fallback, 需要指定 fallback 以哪种形式展示-等待加载页面

四、具体详情可查看官方文档