``` 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> ) } } ```