为什么react加载异步组件的方法要这么写？原理是什么？

Question

import React, { Component } from "react";
export default function asyncComponent(importComponent) {  
    class AsyncComponent extends Component {   
       constructor(props) {    
           super(props);     
           this.state = {component: null};
       }  
       async componentDidMount() {   
           const { default: component } = await importComponent();   
           this.setState({component});    
       }  
       render() {      
           const C = this.state.component;     
           return C ? <C {...this.props} /> : null;    
       }
    }  
    return AsyncComponent;
}

在使用某个组件时：
import asyncComponent from './untils/asyncComponent';//异步组件的位置
const Do = asyncComponent(() => import('./pages/Do'));