代碼分割之錯誤邊界與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'))

總結

以上是生活随笔為你收集整理的16 代码分割之错误边界与Suspense和命名导出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。