为函数而不是组件反应延迟加载

Posted 2023-03-16

【中文标题】为函数而不是组件反应延迟加载

【英文标题】：React lazy load for a function, not a component

【发布时间】：2021-12-23 05:05:01

【问题描述】：

我正在开发一个 React v16 应用程序，需要加载一个重型 (IMO) 库以用于 xlsx 数据导出。

我正在使用功能组件/钩子。

我了解并使用了<Suspense /> 组件和lazy 用于延迟加载模块。但由于这个项目不是一个组件，它只是一个库函数，我需要通过 onClick 事件运行，我不能使用惰性/悬念。

如何仅在需要时才延迟加载此功能？ (writeXlsxFile)

import React,  useEffect, useState  from "react";
import  connect  from "react-redux";
//...
import writeXlsxFile from "write-excel-file";

//...
  const fileCreate = async () => 
    await writeXlsxFile(exportData, 
      schema,
      fileName: `file.xlsx`,
    );
  ;

return(//...

【问题讨论】：

你能解释一下你所说的“这个函数”是什么意思吗？你是说fileCreate还是writeXlsxFile？

我刚刚更新了它，因为我在想同样的事情，有点模糊。 writeXlsxFile 函数是我想要延迟加载的功能

但如果我在文件顶部导入，它不是延迟加载。我需要它仅在需要时选择性地加载，也就是当用户需要使用它时

无论如何，named 导入可以通过async 延迟加载。例如：async () => const writeXlsxFile = await import ('write-excel-file'), // Whatever you want here

这***.com/a/64208216/5690068 能回答你的问题吗？动态导入将起作用，您只需要通过module.default访问它

【参考方案1】：

javascript（通过相关性，React）支持Dynamic Imports。

在任何情况下，您都可以使用以下代码延迟加载您的函数：

const fileCreate = async () =>  
  const writeXlsxFile = await import ('write-excel-file')
  void await writeXlsxFile(exportData, 
      schema,
      fileName: `file.xlsx`,
  );

-- 2021-11-10 更新

这个post 解释了使用default 导入时。您必须在模块中调用default 函数。

所以，

const fileCreate = async () =>  
  const default: writeXlsxFile = await import ('write-excel-file')
  void await writeXlsxFile(exportData, 
      schema,
      fileName: `file.xlsx`,
  );

【讨论】：

很遗憾我得到一个“writeXlsxFile”不是函数错误，我确实更新了名称以匹配，你有 writeXlsx，它已更新为 writeXlsxFile

@sao 您在更新名称后仍然收到错误消息？

是的，它还在

更新了@sao。我突然想到你正在使用 default 导入而不是 named 导入（即使 default 导入可以按名称导入）。

你明白了，伙计。第二个演绎作品。我必须阅读默认设置。谢谢！