使用Browserify / ReactJS的全局

Question

我有几个访问某些全局变量的ReactJS组件，如果它在一个文件中，它可以正常工作，但如果我将它们分开并用module.exports导出它们，请将其与browserify捆绑在一起不再起作用了。目前所有''全局''都位于index.js，同时也发生了React Rendering。

我知道全局变量是坏事，我正在研究它，但与此同时我想模块化编码。我在互联网上找到了一些解决方案，但是没有什么比这更容易了（对于很多全局）。

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

Answer 1

快速

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

直观

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

我的偏好

您可以将功能分配给module.exports;类似的东西：

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

然后您可以传递index.js的“全局”值：

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

如果myGlobal不是基元（例如，字符串，数字等），则它是“通过引用传递”，因此可以在模块内以其他模块可访问的方式对其进行修改。

阵营-γ

React鼓励您从上到下将数据作为组件属性传递，而子级使用回调从下往上传递数据。常见的模式是使用Flux或Redux来管理高级组件订阅的“全局”数据存储，而低级组件使用“操作”来更改存储。

比照React Docs: "Communicate Between Components"

比照React Docs: "Expose Component Functions"