关于javascript:react中对import-ReactComponent-from-‘react‘写法的解释

一. 对 import React,{Component} from ‘react’ 写法的解释

首先对于一下写法①的解释

① import React,{Component} from ‘react’
作用相当于上面②和③这两句话

②默认导入(default import)：导入 react 模块（组件）中的默认组件，并且命名为 React

import React from ‘react’

③成员导入（member import、named import）：引入 react 文件中的成员组件 Component, 能够用 {} 模式引入多个成员组件

import {Component} from ‘react’
其中③的意思是导入 ’react’ 中的成员 Component 组件,：

Const Component = React.Component
疑难：为何③中 Const Component = React.Component 中的 React 是大写，而不是 react，意思是从‘react’中导入的默认组件 React 的成员组件 Component？

答：应该合并来看，不能疏忽了②，后面②曾经导入了 react 模块（组件）中的默认组件，并且命名为 React, 所以③中的 React 是大写的。

二.react 中的 import 用法

//module 可翻译为模块、组件。

//export 可翻译为接口。

①导入默认组件（default import）

import a form ‘module-name’
导入 ’module-name’ 模块（组件）中的默认组件，命名为 a

eg：

import React from ‘react’
②导入成员组件（member import、named import）, 即导入单个接口（Import a single export from a module）

import {a} from ‘module-name’
导入 ’module-name’ 模块（组件）中的单个成员 a 组件，

eg:

import {Component} from ‘react’
③同时导入默认组件（default import）与成员组件（member import、named import）

import a,{b} from ‘module-name’
导入 ’module-name’ 模块（组件）中的默认组件并命名为 a，导入 ’module-name’ 模块（组件）中的 b 成员组件

eg：

import React,{Component} from ‘react’
④导入 ’module-name’ 模块（组件）中的成员组件 a，并重命名为 b

import {a as b} from ‘module-name’
⑤导入 ’module-name’ 模块（组件）中的所有组件，并命名为 a

import * as a from ‘module-name’
如果 a 组件中蕴含一个 doAllTheAmazingThings()接口（export），能够这样调用

a.doAllTheAmazingThings();