使用React.惰性服务(非组件)类型的代码

Question

每个文档，React。Lazy需要封装在<suspense>中。我可以使用React.Lazy惰性加载导出函数的服务吗?

const actionsList = React.lazy(() => import('@pkg/actions-list-service'));

和action-List-service在.ts中导出函数。文件。对于惰性加载非组件类型的代码，React推荐的方式是什么?这是我尝试惰性加载服务代码时得到的错误，我得到了这个错误:

Type 'Promise<{ default: typeof import("D:/services/actions-list-service/dist/types"); useActionsList: () => (itemElement: HTMLElement | null | undefined) => readonly ActionsListItem[]; }>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.

Answer 1

如果我们想要触发React悬念加载器，那么我们必须提供一个组件来加载独立库。

例如，我想惰性加载html5-qrcodeHtml5Qrcode模块，它是314K(压缩93.5K)。

我们创建一个加载器组件，它将有一个onLoaded回调道具，它只是返回模块，如:

import { useEffect } from 'react';
import { Html5Qrcode } from 'html5-qrcode/esm/html5-qrcode';
export default function Html5QrcodeLoader({ onLoaded }) {
useEffect(() => {
onLoaded(Html5Qrcode);
}, []);
return null;
}

然后我们使用React.lazy导入该组件，如:

const Html5QrcodeLoader = React.lazy(() =>
import(
'@components/Html5QrcodeLoader' /* webpackChunkName: "Html5QrcodeLoader" */
)
);

现在我们可以像这样使用加载器到我们的组件:

export default function QrCodeScanner() {
const [Html5Qrcode, setHtml5Qrcode] = useState();
useEffect(() => {
if (!Html5Qrcode) {
return;
}
// Use lazy loaded module Html5Qrcode
}, [Html5Qrcode]);
const handleHtml5QrcodeLoaded = module => {
// Careful, always do it using a function,
// else the module itself will be initialized!
setHtml5Qrcode(() => module);
};
if (!Html5Qrcode) {
// Lazy load it
return <Html5QrcodeLoader onLoaded={handleHtml5QrcodeLoaded} />;
}
log('Html5Qrcode loaded');
// Now render
return (
<div>
<div>QrCodeScanner</div>
</div>
);
}

Answer 2

如果您检查React.lazy()的源代码，您将看到它是面向组件呈现的，正如您可以猜到的那样。为了延迟加载，你可以使用async import:

// example code, to show possible solution
const moduleMap = {
module1: () => import('./module1.js'),
module2: () => import('./module2.js')
}
function doSomething(moduleName) {
// You might call this one in useEffect() for example
const module = moduleMap[moduleName]
if (module) {
module().then(({default: actualModule, member1}) => {
// use the module members
})
}
}

这将允许延迟加载和可能的代码分割。