懒加载高阶组件

import { lazy, Suspense } from 'react';

export type withLazyLoadFactory = () => Promise<{ default: React.ComponentType<any> }>;
export type withLazyLoadProps = {
    fallback?: React.ReactNode;
    [k: string]: any;
};

export default function withLazyLoad(factory: withLazyLoadFactory, props: withLazyLoadProps = {}) {
    const { fallback, ...childrenProps } = props;
    const Element = lazy(factory);

    return (
        <Suspense fallback={fallback}>
            <Element {...childrenProps} />
        </Suspense>
    );
}

调用demo

import withLazyLoad from './withLazyLoad';

const Example = withLazyLoad(() => import('./ExampleComponent'), { fallback: <div>Loading...</div> });

export default Example;

这里的ExampleComponent是需要懒加载的组件，fallback是在组件加载过程中显示的占位符。在使用时，只需要像普通组件一样使用即可：

import Example from './example';

function App() {
    return (
        <div>
            <h1>Lazy Loaded Component</h1>
            <Example />
        </div>
    );
}

export default App;

这样，ExampleComponent就会在需要时才被加载，而不是在页面加载时就被加载。

为什么封装一层

withLazyLoad是一个高阶组件，它的作用是将需要懒加载的组件进行封装，使得这个组件在需要时才会被加载，而不是在页面加载时就被加载。这样可以提高页面的加载速度，减少不必要的资源浪费。

withLazyLoad的实现原理是使用了React的lazy和Suspense组件。lazy组件可以接受一个函数作为参数，这个函数返回一个动态import的Promise，lazy组件会在组件需要渲染时自动加载这个Promise。Suspense组件可以在组件加载过程中显示一个占位符，直到组件加载完成后再显示组件本身。

因此，withLazyLoad的作用就是将需要懒加载的组件使用lazy和Suspense进行封装，使得这个组件在需要时才会被加载，而不是在页面加载时就被加载。这样可以提高页面的加载速度，减少不必要的资源浪费。