全局 es6 模块用于在 react 应用程序中存储常量 - 防止垃圾回收



我想在模块(导出(中存储一些变量,以便在我的反应应用程序中用作常量。我想避免上下文,因为不需要重新渲染组件,而且我需要在我的反应组件之外使用这些常量。

为了防止垃圾回收,我应该在哪里做(在哪里导入它(?

我的一个想法是将其导入并重新导出到根组件之上。

编辑:

更准确地说,将有一个组件将设置常量一次(改变变量(,以便其他组件或文件可以访问它。

所以,你需要的是某种二传手/getter模式。虽然我大多不推荐它,除非你知道你在做什么,因为如果变量发生变化,React 不会重新渲染,因此你需要确保在使用之前设置变量

您应该有类似于以下示例的内容,以便它以您想要的方式工作。你可以找到它在这个代码沙盒上工作的例子。

export let MY_VARIABLE = "";
export const setMyVariable = value => (MY_VARIABLE = value);

PS:我在代码中添加了一些console.log,以便您查看导入/获取/设置的行为方式。

在深入研究之后,我发现 es6 模块规范指出:

导入模块时,它会得到loaded=>parsed=>evaluatedcached(单例(。它还说,当您导入模块时,其值是通过引用(也称为赋值(传递的。我没有找到任何提及何时或如何从该缓存中卸载 es6 模块的内容。

这意味着,当您导入一次模块时,只要程序正在运行,它就会存在,并且所有模块都直接访问其值。

参考

  • https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
  • https://medium.com/@mivanichok/understanding-es6-modules-in-depth-article-b49612926e39

您可以在 src 文件夹中创建一个配置.js并编写您的常量变量,例如

配置.js 模块导出 = { CONST_VAR:"常量值", }

导入配置.js 在您的组件中并使用它

最新更新