使用 react.lazy 配合动态导入的核心做法是将其包裹在 import() 函数中，并将该表达式作为组件属性传递给路由配置或父组件。这样做会在首次渲染时触发网络请求加载代码块，加载完成后自动替换为实际组件，从而实现路由级别的代码分割。
如何配置 Suspense 处理加载状态
必须将 React.lazy 导出的组件包裹在 Suspense 组件内部，并通过 fallback 属性指定加载期间的 UI 占位符。如果没有 Suspense 包裹，应用会抛出错误；如果未提供 fallback，用户可能会看到短暂的空白屏幕。这种组合确保了异步加载过程中的用户体验可控。
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
如何处理动态导入的报错情况
当网络请求失败或模块解析出错时，React.lazy 会抛出错误，导致组件树崩溃。为了捕获这些错误，需要使用 Error Boundary（错误边界）组件。通过自定义一个类组件来捕获子组件树中的 JavaScript 错误，可以在加载失败时展示友好的错误提示，而不是让白屏覆盖整个应用。
立即学习“Java免费学习笔记（深入）”；
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</ErrorBoundary>
);
}
懒加载组件在首次渲染时的具体行为是什么
在首次渲染时，React 会先渲染 Suspense 的 fallback 内容，同时启动 import() 的网络请求。此时，实际的懒加载组件尚未挂载到 DOM 上。只有当 Promise 解决并返回模块对象后，React 才会卸载 fallback 并挂载真实的组件实例。这一过程是异步且不可中断的，直到资源加载完成前，用户看到的始终是占位符。
