react中出现过多的组件集中渲染，实现组件懒加载

import Foo from '../components/Foo';
import Bar from '../components/Bar';

export default class LazyPage extends Component {
    render() {
        return (
            <>  
                <Bar/>
                <Foo/>
            </>
        )
    }
}                        

上面例子可以采用react组件懒加载,配合 lazy 来使用 suspense

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

const Foo = React.lazy(() => import('../components/Foo'));
const Bar= React.lazy(() => import('../components/Bar'));

export default class LazyPage extends Component {
    render() {
        return (
            <div>
                <Suspense callback={<div>loading...</div>}>
                    <Bar/>
                    <Foo/>
                </Suspense>
            </div>
        )
    }
}

通过使用 Suspense 标签将要进行 lazy（懒加载）的组件进行包裹，然后在 callback 函数中给出加载过程中处理方式，也就是加载过程中的行为。