import * as react from ' react‘和import react from 'react’有什么区别？

Question

我对React和一般的编码背景都很陌生。我不确定这两种说法的区别是什么

import * as react from 'react'

和

import react from 'react'

提前感谢！

Answer 1

最常用的导入有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';

这将以A的形式从abc导入默认导出。导出可能如下所示：

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

export default B;  // at the end of component

Answer 2

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

Answer 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语法行为。