React Lazy and Suspense realize lazy loading (lazy loading)

import React, {
    
     Component, lazy, Suspense } from 'react'

const About = lazy(() => import('./About.jsx'));
//lazy是一个方法，它封装了“动态加载的过程”
//About是一个React组件，但它并不能被渲染，它只是一个“动态加载过程”的封装。它在要被渲染的时候就会去加载真正的About组件

export default class IndexPage extends Component {
    
    
  state = {
    
    
    hasError: false
  }
  //Error boundaries，中文意为错误边界。我们希望部分UI的错误不会导致整个程序的崩溃，以及希望在错误发生时能够显示对应的UI
  //Error boundaries方法一
  componentDidCatch() {
    
    
    //如果 render() 函数抛出错误,就会触发componentDidCatch，也就是当组件加载失败，就会使用该函数
    this.setState({
    
     hasError: true })
  }

  //Error boundaries方法二
  static getDerivedStateFromError() {
    
    
    //getDerivedStateFromError为静态函数
    //运行时间点：子组件被渲染发生错误之后且也页面更新之前
    return {
    
    
      hasError: true
    }
    // 返回的值会自动 调用setState，将值和state合并
  }
  render() {
    
    
    if (this.state.hasError) {
    
    
      return (
        <div>error</div>
      );
    }
    return (
      <div>
        <Suspense fallback={
    
    <div>loading</div>}>
          <About></About>
        </Suspense>
        {
    
    /* 
          lazy必须配合Suspense使用，Suspense是展示待加载状态中的组件，fallback属性需要传入一段jsx
          Suspense需要把异步导入的组件包起来 
        */}
      </div>
    );
  }
}