我想在模块(导出(中存储一些变量,以便在我的反应应用程序中用作常量。我想避免上下文,因为不需要重新渲染组件,而且我需要在我的反应组件之外使用这些常量。
为了防止垃圾回收,我应该在哪里做(在哪里导入它(?
我的一个想法是将其导入并重新导出到根组件之上。
编辑:
更准确地说,将有一个组件将设置常量一次(改变变量(,以便其他组件或文件可以访问它。
所以,你需要的是某种二传手/getter模式。虽然我大多不推荐它,除非你知道你在做什么,因为如果变量发生变化,React 不会重新渲染,因此你需要确保在使用之前设置变量。
您应该有类似于以下示例的内容,以便它以您想要的方式工作。你可以找到它在这个代码沙盒上工作的例子。
export let MY_VARIABLE = "";
export const setMyVariable = value => (MY_VARIABLE = value);
PS:我在代码中添加了一些console.log
,以便您查看导入/获取/设置的行为方式。
在深入研究之后,我发现 es6 模块规范指出:
导入模块时,它会得到loaded
=>parsed
=>evaluated
和cached
(单例(。它还说,当您导入模块时,其值是通过引用(也称为赋值(传递的。我没有找到任何提及何时或如何从该缓存中卸载 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 在您的组件中并使用它