react中对import React,{Component} 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是大写的。

//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();