react 异步加载

在React中，可以使用React.lazy配合Suspense来实现异步加载组件。具体的使用方法如下：

1. 首先，使用React.lazy来异步引入组件。例如，将Home组件异步引入可以这样写：

   const Home = React.lazy(() => import('组件路径'));

2. 然后，在实际使用该组件的地方，可以通过Suspense组件来包裹该组件，并设置fallback属性来指定在组件加载完成之前显示的内容。例如：

   const ComponentLoading = Component => (
     <Suspense fallback={<div>组件未加载完成时显示的内容</div>}>
       <Component/>
     </Suspense>
   );

3. 最后，在需要使用异步加载的地方，通过ComponentLoading组件包裹异步引入的组件。例如，在home页中可以这样使用：

   import React from "react";
   import ComponentLoading from "./ComponentLoading";

   const Home = React.lazy(() => import('./Home'));

   export default class HomeContainer extends React.Component{
     constructor(props) {
       super(props);
     }

     render() {
       return (
         <div className="home">
           <ComponentLoading Component={Home} />
         </div>
       )
     }
   }