时间戳

首页 > 解决方案 > 反应中的全局效用函数？如何实施

javascript - 反应中的全局效用函数？如何实施

问题描述

我想使用“全局函数”，因为在我的许多组件中都没有更好的词，比如 80% 或更多。这个函数有点像一个翻译成语言的消息库，所以我会传递它，SM(1245, 'eng')假设它以英语返回消息。

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

该函数非常类似于地图地图的吸气剂，但是，用于填充这些地图的数据位于服务器上。

如果我理解正确，从文件中导出函数然后将其导入每个组件将多次“重新运行”函数的脚本文件，导致多次服务器调用来获取数据，我想避免这种情况当许多用户开始使用许多组件时，不要对我的服务器进行 DDOS。

我该怎么做？

编辑：我也想过让它成为我的 App.js 主要组件类的一部分，但是我必须通过道具将它传递给长链，我真的很想避免这种情况。

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

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

标签： javascriptreactjs

解决方案

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

但是，您可以通过将结果缓存在服务模块中来避免多个资源请求。这是关于 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每 5 秒执行一次。正如您从日志语句中看到的那样，只有第一次调用会导致对新数据的请求；否则正在提供缓存的数据。

我还导入getData了两次（一次在“index.js”中，一次在“header.js”中），但“get-data.j”中的 console.log 语句只执行一次。所以在第一次导入后很可能不会再次执行。

如果您想变得更花哨，还有其他几种（可以说更复杂）的方法来实现“全局”效用函数。例如：

推荐阅读