Question

我见过两种访问Component的方式：

import React from 'react';

class Foo extends React.Component {
    ...
}

和

import React, { Component } from 'react';

class Foo extends Component {
    ...
}

这两者之间是否存在差异（例如，可能在性能方面）？

Answer 1

简答：不。

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

如果您想象反应模块本身 - 它可能看起来像这样。

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';

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

import { Component } from 'react';

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

import React, { Component } from 'react';

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

值得一提的其他几点：

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

Answer 2

不，这只是您导入本地命名空间的问题。如果您已经在本地拥有一个名为Component的东西，那么您将无法执行后者。除此之外，它只是偏好，是否要列出最先导入的所有内容，或者能够轻松查看使用地点的内容。

Answer 3

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

React.Component和Component之间有什么区别？

3 个答案: