代碼分割之錯誤邊界與Suspense

const Main = React.lazy(() => import('./main'))
class ErrorBoundary extends React.Component {state = {hasError: false,}static getDerivedStateFromError(err) {console.log('getDerivedStateFromError err', err)return {hasError: true}}componentDidCatch(err, info) {console.log('componentDidCatch err', err)console.log('componentDidCatch info', info)}render() {if (this.state.hasError) {return (<h1>This is Error UI</h1>)}return this.props.children}
}
function App() {return (<div><React.Suspense fallback={<div><h1>Loading...</h1><h1>Loading...</h1><h1>Loading...</h1><h1>Loading...</h1></div>}><ErrorBoundary><Main /></ErrorBoundary></React.Suspense></div>)
}
ReactDOM.render(<App />,document.getElementById('app')
)

export default class Main extends React.Component {render() {return (<div>顯示內容{title}</div>)}
}

命名導出

• lazy只支持默認導出的組件
• index.jsx

export class Test1 extends React.Component {render() {return (<h1>Test1</h1>)}
}
export class Test2 extends React.Component {render() {return (<h1>Test2</h1>)}
}

• Test1.jsx

export { Test1 as default } from './index'

• Test2.jsx

export { Test2 as default } from './index'

• main.jsx

const Test1 = React.lazy(() => import('./components/Test1'))
const Test2 = React.lazy(() => import('./components/Test2'))