``` import React, { Component, lazy, Suspense } from 'react' // lazy const About = lazy(() => import(/*webpackChunkName:"about"*/'./About.jsx')) // ErrorBoundary // componentDidCatch export default class App extends Component { state = { hasError: false // 判断是否存在 error } // componentDidCatch() { // this.setState({ // hasError: true // }) // } // 捕获组件的异步导入错误，执行方法 static getDerivedStateFromError() { return { hasError: true } } render() { if(this.state.hasError) { return <div>网络错误，请稍后重试</div> } return ( <div> {/* Suspense 包裹异步组件，fallback 返回未加载时状态 */} <Suspense fallback={<div>loading</div>}> <About/> </Suspense> {/* 111 */} </div> ) } } ```