React.Component 和 Component 之间有什么区别吗?

IT技术 javascript reactjs module ecmascript-6
2021-05-04 23:52:16

我见过两种访问方式Component

import React from 'react';

class Foo extends React.Component {
    ...
}

import React, { Component } from 'react';

class Foo extends Component {
    ...
}

两者之间有什么区别(例如,性能方面)?

3个回答

简短的回答:没有。

从另一面看它可能会使理解更容易。

如果您想象 react module本身 - 它可能看起来像这样。

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

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

export default React;

注意使用export.

默认 export是react,所以它是在这样的另一个module访问(或进口):

import React from 'react';

Component 是一个命名的 export: Component,因此可以通过以下方式在另一个module中访问:

import { Component } from 'react';

但是在这种情况下 Component 也附加到 React 对象。因此,您可以通过以下任何一种方式使用导入:

import React, { Component } from 'react';

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

还有几点值得一提:

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

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

不,这只是您导入本地命名空间的问题。如果你在本地已经有一个叫做 Component 的东西,你就不能做后者。除此之外,这只是偏好,无论您是要列出导入的所有内容,还是能够轻松地在使用站点上查看某些内容来自哪个module。