使用 Browserify / ReactJS 的全局变量

Question

我有几个 ReactJS 组件可以访问一些全局变量，如果它在一个文件中就可以正常工作，但是如果我将它们分开并使用 module.exports 导出，则将其与 [=12= 捆绑在一起] 已经不行了。目前，所有“'globals'”都在 index.js 中，也发生了 React 渲染。

我知道全局变量是一件坏事，我正在努力解决这个问题，但与此同时我想模块化编码。我在互联网上找到了一些解决方案，但没有什么是容易的（对于 much 全局变量）。

所以问题是，临时解决方案的最佳（最简单，工作量最少）方法是什么，以及如何长期摆脱全局变量。

Answer 1

快

您可以将属性分配给 window，这是浏览器中的全局上下文，或 global，这是节点中的全局上下文。例如，window.myGlobal = 5.

直观

如果您的全局变量是静态的，您可以创建一个包含全局值的模块，并 require 在需要的地方使用它。 Module references are cached，意味着重复 require 加载 return 对同一个 object 的引用；虽然您可以利用这一事实来管理全局变量，但这种方法对我来说很脆弱。

我的偏好

您可以为module.exports分配一个功能；类似于：

// myModule.js
module.exports = function(kindaGlobal){ 
    ...do something with kindaGlobal...
    return {
       ...some object with properties referencing kindaGlobal...
    };
};

然后您可以从 index.js:

传递您的 "global" 值

var myModule = require('./myModule.js')(myGlobal);

如果 myGlobal 不是基本类型（例如，字符串、数字等），它是 "passed-by-reference"，因此它可以在模块内以其他模块可访问的方式进行修改。

React-y

React 鼓励您将数据作为组件属性自上而下传递，而 children 使用回调自下而上传递数据。一种常见的模式是使用 Flux or Redux 来管理 high-level 组件订阅的 "global" 数据存储，而 low-level 组件使用 "actions" 更改存储。

比照。 React Docs: "Communicate Between Components"

比照。 React Docs: "Expose Component Functions"

使用 Browserify / ReactJS 的全局变量

Globals with Browserify / ReactJS

javascript

browserify

reactjs

快

直观

我的偏好

React-y