React的Lazy与Suspense

Lazy 懒加载组件

Suspense懒加载期间，UI会出现空挡

import React,{ Lazy,Suspense } from 'react';

const About = lazy( ()=>import('./About.jsx') );

class App extends React.Component {
    render(){
        return {
            <div>
                <Suspense fallback={<div>loading</div>}>
                    <About></About>
                </Suspense>
            </div>
        }
    }
}

export default App;

取别名：

const About = lazy( ()=>import(/*aliasName: "about"*/'./About.jsx') );

捕获组件错误

state = {
    hasError:false
}

//捕获到了错误
componentDidCatch(){
    this.setState({
        hasError:true
    })
}
//捕获错误写法2
static getDerivedStateFromError(){
    return {
        hasError:true    
    }   
}


//render
if(this.state.hasError){
    return <div>error</div>
} else {
    //code
}