import * as react from 'react' 与 import react from 'react' 有啥区别

Posted 2023-03-13

【中文标题】import * as react from \'react\' 与 import react from \'react\' 有啥区别

【英文标题】：What is the difference between import * as react from 'react' vs import react from 'react'import * as react from 'react' 与 import react from 'react' 有什么区别

【发布时间】：2019-07-02 07:16:39

【问题描述】：

我是 React 或一般编码背景的新手。而且我不确定这些陈述之间有什么区别

import * as react from 'react'

和

import react from 'react'

提前致谢！

【参考方案1】：

最常用的import有3种。

类型 1

import * as A from 'abc';

这将导入在 abc 中标记为导出的所有内容。您可以使用以下代码访问它们。

A.Component 

类型 2

import A from 'abc';

这将从 abc 导入 A，包含如下内容：

export const A = () => ;

类型 3

import A from 'abc';

这将从 abc 导入默认导出为 A。导出可能如下所示：

const B = () => ; // The name "B" is not exported, only the value.

export default B;  // at the end of component

【讨论】：

感谢您的澄清！

谢谢。类型 3 对我来说不是很清楚。我 import A 但是我不是通过声明 const A =.... 来覆盖它吗？ component 中的 export 语句是导入 A 还是最初导入 A？另外，在类型 2 中，A 是否需要是一个函数（()=>... 或者它也可以是一个对象export const A=？

对象也是如此。对于此 import A from 'abc'; import 语法 export 像这样 export default A;

【参考方案2】：

Pattern import * as React from 'react 与 React 中类型系统的使用有关，例如 Flow 或 Typescript。使用 import React from 'react' 会导致导入类型定义出现问题。现在在 Typescript 中你可以使用allowSyntheticDefaultImports 标志，它可以解决这个问题并导入所有类型，即使你使用import React from 'react'。

【讨论】：

或者干脆使用 create_react_app 已经解决了这个问题，让我们import React from 'react' 即使使用打字稿。

【参考方案3】：

一般来说，对于 ES2015 (ES6) 模块

import * as name from 'module';

是一个命名空间导入，指示所有导出的对象都将放置在名称命名空间中。然后你可以这样做：

name.blabla1
name.blabla2
etc ...

命名空间不可调用。所以你不能这样做：

name();

同时：

import name from 'module';

是一个默认导入，相当于：

import default as name from 'module';

您只从模块中导入默认对象。

在 React 的情况下，混淆可能/可能是由于 React 的默认导出是...... React（Babel 出于互操作性原因添加了默认导出）。严格来说，使用的语法是：

import * as React from 'react';

或

import Whatever from 'react';

以下工作仅因为 Babel 的转换（不是 100% 确定）：

import React from 'react';
import React,  Whatever  from 'react';

对于那些使用 TypeScript 的人，在 2.7 版本之前，默认是对待：

import * as name from 'module';

相当于：

const name = require('module');

和：

import name from 'module';

相当于：

const name = require('module').default;

从 2.7 版开始，如果您的编译器设置将“esModuleInterop”指定为 true（推荐），那么您可以使用 ES2015 语法行为。