Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/438.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 反应组件和组件之间有什么区别吗?_Javascript_Reactjs_Module_Ecmascript 6 - Fatal编程技术网

Javascript 反应组件和组件之间有什么区别吗?

Javascript 反应组件和组件之间有什么区别吗?,javascript,reactjs,module,ecmascript-6,Javascript,Reactjs,Module,Ecmascript 6,我看到了两种访问组件的方法: import React from 'react'; class Foo extends React.Component { ... } 及 这两者之间有什么区别吗(例如,可能在性能上)?在第一个示例中,您通过import-React获得了整个导出,并通过React-import调用组件。在第二个示例中,您分别从React导入组件。这就是为什么不需要编写React.Component。这是相同的,但导入的方式不同。不,这只是导入到本地名称空间的内容的问题

我看到了两种访问
组件的方法:

import React from 'react';

class Foo extends React.Component {
    ...
}


这两者之间有什么区别吗(例如,可能在性能上)?

在第一个示例中,您通过
import-React
获得了整个导出,并通过React-import调用
组件。在第二个示例中,您分别从React导入
组件
。这就是为什么不需要编写
React.Component
。这是相同的,但导入的方式不同。

不,这只是导入到本地名称空间的内容的问题。如果您已经在本地拥有了一个名为Component的组件,那么您将无法执行后者。除此之外,这只是一种偏好,无论您是想将导入的所有内容都列在最上面,还是能够在使用站点轻松查看某个模块。

简短回答:否

从另一个角度看它可能会使理解更容易

如果您想象react模块本身,它可能看起来像这样

export const Component = () => {};    // the component class/function

const React = { Component: Component };  // the main react object

export default React;
注意
export
的用法

默认的
导出
是React,因此可以在另一个模块中访问(或导入),如下所示:

import React from 'react';
组件是命名的导出:
组件
,因此可通过以下方式在另一个模块中访问:

import { Component } from 'react';
但在本例中,组件也附着到React对象。因此,您可以通过以下任一方式使用导入:

import React, { Component } from 'react';

class MyComp extends React.Component {}
class MyOtherComp extends Component {}
还有几点值得一提:

  • 每个模块只能有一个默认导出,但可以导出多个变量
  • 默认导出可以在导入时命名为任何名称。例如
    从“react”导入Cat
  • 您可以通过执行以下操作重命名命名导入:
    import{Component as Cat}from'react'
  • 此行为不是特定于React的,而是ES6模块系统的一部分

阅读解构作业:@Baruch这是一个导入声明,与解构无关。@Bergi我同意,它与“解构”(无论是什么)无关。但是,它实际上是解构对象以获得该对象中的特定属性@巴鲁克的“解构”是你刚刚链接的,没有“解构”。但是不,导入声明不会分解任何对象!很好的解释。这些因素中有没有任何一个会对摇树的工作方式或丑陋的工作方式产生影响?
import React, { Component } from 'react';

class MyComp extends React.Component {}
class MyOtherComp extends Component {}