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

简答:不.

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

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

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

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

export default React;

注意使用export.

的默认 export是反应,所以它是在这样的另一个模块访问(或进口):

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模块系统的一部分.