import * as'react'的反应与import'react'的反应和有什么区别

Question

我对React或一般的编码背景还是陌生的。我不确定以上声明之间有什么区别。提前致谢！

Answer 1

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

Answer 2

一般来说，对于 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 语法行为。

Answer 3

最常用的进口商品有3种。

类型1

import * as A from 'abc';

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

A.Component 

2型

import {A} from 'abc';

这将从abc导入A。它将像这样导出。

export const A = () => {};

类型3

import A from 'abc';

const A = () => {};

export default A;  // at the end of component