react中对import React,{Component} from ‘react‘写法的解释

Posted 2021-09-26 ethanyu

一.对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();