同时导入命名空间与子模块是否存在弊端？以React导入为例

嘿，这个问题我刚学React的时候也纠结过，给你说清楚哈～

你的第二种猜想是完全正确的：import React, { Component } from 'react'这种方式不会导致重复导入，Component就是React.Component的引用，二者指向同一个内存对象，根本不会多占内存。

核心原因：ES模块的单例机制 #

ES Modules（也就是我们用的import/export）是静态加载+单例模式的：

• 整个应用里，react这个模块只会被加载、解析、执行一次，不管你在多少个文件里导入它。
• 所有导入的内容，本质上都是对这个单例模块导出值的引用，而不是复制一份新的对象。

两种导入方式的本质区别 #

• 第一种写法：import React from 'react'
  你拿到的是React模块导出的默认对象，React.Component是这个对象上的一个属性，要用到组件基类的时候得通过这个属性访问。

• 第二种写法：import React, { Component } from 'react'
  这是ES模块的默认导入+命名导入的组合写法，相当于帮你做了一步：

  const Component = React.Component;
  

  就是把React对象上的Component属性单独提取成一个变量，方便后续使用，完全是同一个引用，没有任何新对象被创建，也不会重复加载模块。

可以自己验证一下 #

写个简单的测试代码就能看明白：

import React from 'react';
import { Component } from 'react';

console.log(Component === React.Component); // 控制台会打印 true

这个全等判断的结果就证明了二者是同一个内存对象。

同事建议这么写的原因 #

其实就是为了代码简洁，后续定义组件的时候可以直接写：

class MyComponent extends Component {
  // ...
}

不用每次都敲React.Component，能少写几个字符，代码看起来也更清爽～

完全不用担心内存或者重复加载的问题，ES模块的机制已经把这些都处理好了😉

内容的提问来源于stack exchange，提问作者Mike Manfrin