Question

我想使用“全局函数” ，因为我的许多组件（例如80％或更多）都缺少更好的词。此函数有点像是翻译成多种语言的消息的存储库，因此我将其传递为SM(1245, 'eng')，并且假设它以英语返回消息。

function SM(messageID, language){
    return languageMap.get(language).get(messageID);
}

该功能几乎就像地图的获取程序一样，但是，用于填充这些地图的数据在服务器上。

如果我正确理解它，则从文件中导出功能，然后将其导入每个组件中将多次“重新运行”该功能的脚本文件，从而导致需要多次服务器调用来获取数据，我想为了避免在许多用户开始使用许多组件时不使用DDOS我的服务器。

我该怎么办？

编辑：我也考虑过将其作为App.js主要组件类的一部分，但随后我必须将其通过道具传递给长链，我真的很想避免那样。

编辑2：尝试了注释中的建议，以正常方式将一个简单的.js文件添加到Index.html，在其中定义了一个函数并在需要的地方使用它，好的老式方法。设法做到这一点，但问题是这种方式添加的功能在React应用程序的“编译时”是不可行的，或者当评估.jsx表达式时我无法使用它。

是否真的没有简单的方法来制作将用于实用程序功能但具有数据且不会为每个组件调用的文件，也不会通过较长的道具链传递文件。？

Answer 1

因此，首先，您认为多次导入意味着多次执行脚本的假设可能不正确。我只是在Node JS中尝试过，看来重新导入的模块没有再运行。

但是，您可以通过将结果缓存在 service 模块中来避免多个资源请求。这是关于simple example的stackblitz。服务模块仅包含函数getData，该函数返回发出请求的承诺（也将缓存接收到的数据）或直接解析为缓存的数据（如果存在）。

    // log this everytime the script is being executed
console.log('get-data.js module being executed');

// just an example
const resourceUrl = 'https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json';

let cachedData = null;

const getData = () => {
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(resourceUrl, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export { getData };

在示例中，getData每隔5s执行一次。正如您从日志语句中看到的那样，只有第一个调用会导致对新数据的请求。否则将提供缓存的数据。

我还要两次导入getData（一次在“ index.js”中，一次在“ header.js”中），但是在“ get-data.j”中的console.log语句只执行一次。因此，很可能在首次导入后不再执行。

如果您想花更多的钱，可以采用另外两种方法（可能更复杂）来实现“全局”实用程序功能。例如：

Answer 2

我建议将您的消息保留在上下文中，并创建一个组件以从react上下文中检索消息。您还可以使用“全局”功能创建一个对象，并使用HOC注入它。

我这样做的方法是，我有一个组件，该组件使用react上下文使用messages对象和当前语言环境检索消息，以在呈现的输出中显示该消息。我还创建了一个HOC，该HOC注入了一些辅助函数，用于检索占位符等的消息。

全局实用程序功能有何反应？如何实施

2 个答案: