【发布时间】：2021-07-23 14:33:37
【问题描述】：
假设我有以下 ReactJS 组件：
const MyComponent = () => {
const jsonData = require("./theJsonData.json");
return <ChildComponent jsonData={jsonData} />
}
注意 React 组件中的 require() 调用。通常，我会使用文件顶部的import 导入 JSON。
有人会向我解释为什么这样做是错误的。我意识到这并不常见，而且我什至从未在野外见过这种方法。但它确实有效。我正在寻找一个清晰的解释，说明为什么这是一种不好的方法。
或者，如果您认为这是一个好方法，我也很想学习。
更新：
这个问题仍然存在，但我想指出我刚刚做的一些研究。我刚刚验证了此文件的所有requires 将在运行时引用同一个对象。每个require() 都将替换为对__webpack_require__('the/path.json') 的调用。该调用始终返回相同的对象。即使您在不同的组件中使用它。
所以我最初对拥有 20 个 JSON 数据副本（20 个对象对应 20 个组件）的担忧已经不复存在。
所以现在我真的不知道问题是什么。这种方法是否存在问题，或者它只是“看起来”错误。
【问题讨论】：
-
为什么要允许出现性能问题？你已经知道它会发生，你怎么能保证其他开发者不会按预期使用它？
-
在绝对没有问题的解决方案（开头
import）和可能引入性能问题的解决方案（require）之间，您会选择哪个？ -
我很欣赏这两个“安全起见”的cmets。我发布了这个问题，以便 webpack 或 requireJS 的专家可以指定它导致的确切问题（或者甚至有一个问题）。例如， require 在运行时使用 __webpack_require__('path') 来访问对象（但每次都是新的，还是它们都引用同一个对象），而 import 用对对象的全局引用替换变量赋值以下划线中的名称为前缀。我希望有人能从这个角度解释使用 require() 的缺点。