如何在React中制作一个延迟加载的高阶组件

Question

这是HOC的主要思想，它可以加载任何带有React.lazy和React.Susense的封装组件。这可能吗？？？所以，我已经能够写一些了，但不确定我是否能够正确地。。。

import React, { Suspense, lazy, useState, useEffect } from "react"
export function withLazyImport(LazyComponent) {
return (props) => {
const [loadedComponent, setLoadedComponent] = useState(null)
useEffect(() => {
setLoadedComponent(lazy(() => import(<LazyComponent {...props} />)))
//eslint-disable-next-line
}, [])
return (
<Suspense fallback="Lazy component is loading ...">
{loadedComponent}
</Suspense>
)
}
}

Answer 1

我不明白你为什么要使用useEffect。生成的组件不会将新道具传递给懒惰组件，因为道具是在did mount上传递的。

我根据这个问题的作者提供的例子想出了另一个解决方案

import React, { Suspense } from 'react';
export const withLazyComponent = (LazyComponent) => {
return (props) => (
<Suspense fallback="Lazy component is loading ...">
<LazyComponent {...props} />
</Suspense>
)
}

然后你用它像：

const LazyComponent = withLazyComponent(React.lazy(() => import('path/to/component')));

Answer 2

以下是如何在TypeScript中实现它

import { Loader } from "../components/loader";
import { Suspense } from "react";
/**
* HOC to wrap a component in a Suspense component.
*/
export default function withSuspense<P>(Component: React.ComponentType & any) {
return function WithSuspense(props: P) {
return (
<Suspense fallback={<Loader />}>
<Component {...props} />
</Suspense>
);
};
}

Answer 3

您可以尝试使用现有的解决方案，如Loadable Components

Answer 4

这也对我有用：

import { Suspense, FC, LazyExoticComponent } from "react";
function withLoadable<P extends object>(Component: LazyExoticComponent<FC>) {
return function Loadable(props: P) {
return (
<Suspense fallback={"loading"}>
<Component {...props} />
</Suspense>
);
};
}
export default withLoadable;