React 18 新特性（二）：Suspense & SuspenseList

本文已收录在 Github: https://github.com/beichensky/Blog 中，欢迎 Star，欢迎 Follow！

前言

本文介绍了 React 18 版本中 Suspense 组件和新增 SuspenseList 组件的使用以及相关属性的用法。并且和 18 之前的版本做了对比，介绍了新特性的一些优势。

一、回顾 Suspense 用法

早在 React 16 版本，就可以使用 React.lazy 配合 Suspense 来进行代码拆分，我们来回顾一下之前的用法。

1. 在编写 User 组件，在 User 组件中进行网络请求，获取数据

   User.jsx

   import React, { useState, useEffect } from 'react';
   
   // 网络请求，获取 user 数据
   const requestUser = id =>
       new Promise(resolve =>
           setTimeout(() => resolve({ id, name: `用户${id}`, age: 10 + id }), id * 1000)
       );
   
   const User = props => {
       const [user, setUser] = useState({});
   
       useEffect(() => {
           requestUser(props.id).then(res => setUser(res));
       }, [props.id]);
    
       return <div>当前用户是: {user.name}</div>;
   };
   
   export default User;
   

2. 在 App 组件中通过 React.lazy 的方式加载 User 组件（使用时需要用 Suspense 组件包裹起来哦）

   App.jsx

   import React from "react";
   import ReactDOM from "react-dom";
   
   const User = React.lazy(() => import("./User"));
   
   const App = () => {
       return (
           <>
               <React.Suspense fallback={<div>Loading...</div>}>
                   <User id={1} />
               </React.Suspense>
           </>
       );
   };
   
   ReactDOM.createRoot(document.getElementById("root")).render(<App />);
   

3. 效果图：

   

4. 此时，可以看到 User 组件在加载出来之前会 loading 一下，虽然进行了代码拆分，但还是有两个美中不足的地方

   • 需要在 User 组件中进行一些列的操作：定义 state ，effect 中发请求，然后修改 stat