javascript - 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

简短的回答:没有。

换个 Angular 看可能更容易理解。

如果你想象一下 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';

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

import { Component } from 'react';

但在这种情况下，组件也附加到 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 模块系统的一部分。