对函数(而不是组件)反应延迟加载 [英] React lazy load for a function, not a component

问题描述

我正在使用React v16应用程序，需要加载用于xlsx导出数据的重型(IMO)库。

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

我了解并使用了<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(//...

推荐答案

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`,
  });
}

这篇关于对函数(而不是组件)反应延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！