react中对import React,{Component} from ‘react‘写法的解释，以及react中常见import的用法

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

 

参考文章：

①Difference between import React and import { Component } syntax [duplicate]

②using brackets with javascript import syntax

③import - JavaScript | MDN
————————————————
版权声明：本文为CSDN博主「Easy_Lee_willpower」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37279880/article/details/102589169