React 如何實現骨架屏的展示-Suspense

React新增了一個功能 Suspense組件，幫助我們“等待”目標代碼加載，並且可以直接指定一個加載的界面（像是個 spinner），讓它在用戶等待的時候顯示

 

一、引入 Suspense

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

 

二、使用 Suspense

<Suspense fallback={null}>
    {/* 加載的內容 */}
    <div>加載的內容</div>
</Suspense>

　　

三、⚠️ 注意的點

1. 僅處理界面的交互，與接口數據加載快慢無關
2. 使用 Suspense 必須搭配 fallback， 需要指定 fallback 以哪種形式展示-等待加載頁面

四、具體詳情可查看官方文檔