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
}