React企业级项目工程化——封装suspense实现代码分割

知识前要

suspense介绍

React Suspense 是 React 提供的一种机制，用于在组件加载过程中显示备用内容（如加载指示器），提升用户体验。它主要用于处理异步操作，如代码分割和数据获取。

1. 代码分割：与 React.lazy 结合，实现组件的延迟加载。
2. 数据获取：支持在数据加载完成前显示备用内容。

suspense原理

基于 React 的异步渲染机制和组件生命周期管理

1. 挂起与恢复：通过抛出和捕获 Promise 实现。

当组件需要等待异步操作（如加载代码或获取数据）时，React 会将其标记为“挂起”状态。此时：

• React 会暂停该组件的渲染。
• 向上查找最近的 <Suspense> 组件，并显示其 fallback 内容。
• 当异步操作完成后，React 会重新尝试渲染被挂起的组件。

2. 并发模式：支持时间切片和优先级调度。

• 时间切片（Time Slicing） ：React 将渲染任务分成小块，避免阻塞主线程。
• 优先级调度：React 根据任务的优先级动态调整渲染顺序。
• 挂起与恢复：当组件需要等待异步操作时，React 会暂停渲染，待操作完成后恢复。

封装suspenseLazy实现

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

const SuspenseLazy = (props: any) => {
    return <Suspense fallback={<>...</>}>{React.createElement(lazy(props))}</Suspense>;
};

export default SuspenseLazy;

组件使用

import SuspenseLazy from '@/components/SuspenseLazy';

const Home = SuspenseLazy(() => import(/* webpackChunkName:"home" */ '@/view/Home'));