异步渲染

2024年03月11日

柏拉文

越努力，越幸运

一、Suspense

---

Suspense 是 React 提出的一种同步的代码来实现异步操作的方案。Suspense 让组件‘等待’异步操作，异步请求结束后在进行组件的渲染，也就是所谓的异步渲染

1.1 语法

Home.tsx

import React from "react";
import axios from "axios";

function Home() {
    console.log(axios);
    return <div></div>;
}

export default Home;

App.tsx

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

const LazyHome = lazy(() => import("./Home.tsx"));

function App() {
return (
    <div>
    <Suspense fallback={<div>正在加载中</div>}>
        <LazyHome />
    </Suspense>
    </div>
);
}

export default App;