16 代码分割之错误边界与Suspense和命名导出

代码分割之错误边界与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'))