Question

我想知道对于React应用程序，组件上的import是否在运行时发生？在开发React应用程序时，通常会将所有React代码捆绑到一个文件中，这使我想知道组件每次安装时是否都会导入组件。

例如；

import About from '../components/About';

class About extends React.component {
   render() {...}
}

当所有代码都捆绑在一起并且在生产或开发运行期间，About组件是仅一次导入还是每次安装时才导入？

Answer 1

import在 ECMA-262，第9版，2018年6月ECMAScript®2018语言规范中指定只进行一次评估-具体在15.2.1.16.5.1 InnerModuleEvaluation和{{ 3}}：

如果该操作正常完成，则必须是幂等的。每次使用特定的referencingModule，specifier对作为参数调用它时，它必须返回相同的Module Record实例。   多个不同的referencingModule，specifier对可以映射到同一模块记录实例。实际的映射语义是实现定义的，但是通常将规范化过程作为映射过程的一部分应用于specifier。典型的规范化过程包括诸如按字母顺序折叠大小写以及扩展相对和缩写路径说明符之类的动作。

〜15.2.1.17 Runtime Semantics: HostResolveImportedModule

15.2.1.17。如果模块“ [[状态]]被“评估”，则
    一种。如果未定义模块[[EvaluationError]]，则返回索引。
    b。否则返回模块。[[EvaluationError]]。
  [3]。如果module。[[Status]]为“评估中”，则返回索引。
  [4]。断言：模块。[[状态]]已“实例化”。
  [5]。将模块[[状态]]设置为“评估中”。
  ...片段...
  [12]。断言：模块在堆栈中恰好发生一次。

〜2

如果您正在转译，则转译器（例如webpack）负责确保您的包符合预期的“实现定义”语义（在大多数情况下，Node /浏览器如何对{{ 1}}）。

Answer 2

ES6模块的导入是在构建时进行的，因此该组件将在运行之前与其他代码捆绑在一起。导入是在评估代码之前进行的，并且不能动态。

反应应用程序导入重复

2 个答案: