React.Component和Component有什么区别吗？

Question

我已经看到了两种访问Component的方法

import React from 'react';

class Foo extends React.Component {
    ...
}

和

import React, { Component } from 'react';

class Foo extends Component {
    ...
}

这两者之间有什么不同(比如在性能上)吗？

Answer 1

简短的回答是:不。

从另一个角度看可能会让你更容易理解。

如果你想象一下react模块本身-它可能看起来像这样。

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

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

export default React;

注意export的用法。

默认的export是React，因此可以在另一个模块中访问(或导入)它，如下所示：

import React from 'react';

组件是一个命名的export：Component，因此可以通过以下方式在另一个模块中访问：

import { Component } from 'react';

但在这种情况下，组件也附加到React对象。因此，您可以通过以下任何一种方式使用导入：

import React, { Component } from 'react';

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

值得一提的是：

每个模块只能有一个默认导出，但您可以导出多个variables.

• The默认导出。当您导入它时，可以将其命名为任何名称。例如，import Cat from 'react';.

• You可以通过执行以下操作来重命名命名的导入：import { Component as Cat } from 'react';

• This行为不是特定于React的，而是ES6模块系统的一部分。

Answer 2

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

Answer 3

不，这只是您将什么导入到本地名称空间的问题。如果你在本地已经有了一个叫做Component的东西，你就不能做后者了。除此之外，这只是你的偏好，无论你是想要列出所有导入的内容，还是想要轻松地查看哪些模块来自使用站点。