Reactjs 如何在react中仅延迟加载一次

我很懒地从一个方法中按需动态加载服务文件，该方法会被多次调用，即使我以前加载过该文件，我也必须等到得到响应。我只能装一次吗

processData(serviceName: any, methodName: any) {        
        import(`./${serviceName}Service`)
        .then(component =>{
            var result = component.default[methodName] ? component.default[methodName]() : [];        
        }
      })
      .catch(error => {
        console.error(`Model not yet supported` + error);
        return null;
      });
    }
}

我已经编写了上面的方法来动态地延迟加载服务文件，它工作得很好。但是processData（）会被多次调用（在更改任何控件时），而且大多数情况下，文件已经导入一次。 我不想再次加载该文件。我如何或在哪里可以实现这一点？在调用主页路由之前，我不会获取serviceName参数。

---

我在哪里可以延迟加载导入并在应用程序中永久使用它？

您可以通过使用名称间隔对象来实现

const servicesCache = {};

processData(serviceName: any, methodName: any) {

    if (servicesCache[serviceName]) {
        var result = servicesCache[methodName];
    } else {
        import (`./${serviceName}Service`)
        .then(component => {
                servicesCache[serviceName] = component.default[methodName] ? component.default[methodName]() : [];
                var result = servicesCache[serviceName];
            })
            .catch(error => {
                console.error(`Model not yet supported` + error);
                return null;
            });
    }
}

---

为什么processData会被“多次调用”？从哪里打过来的？这里可能会有

useffect

或

useCallback/usemo

hooks帮助吗？您可以发布调用该函数的完整代码示例吗？在更改某些控件时会调用processData方法。我正在使用类组件。无法使用UseEffect我在2-3个位置执行此导入？有没有我可以在一个地方做的？