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

一.对import React,{Component} from 'react’写法的解释 首先关于一下写法①的解释

①

import React,{Component} from 'react'

作用相当于下面②和③这两句话

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

import React from 'react'

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

import {Component} from 'react'

其中③的意思是导入’react’中的成员Component组件,即：

Const Component = React.Component

二.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]

②import - JavaScript | MDN

原文链接：https://blog.youkuaiyun.com/qq_37279880/article/details/102589169