javascript - Any difference between React.Component and Component? - Stack Overflow

admin管理员组

文章数量:1289986

I have seen two ways of accessing Component:

import React from 'react';

class Foo extends React.Component {
    ...
}

and

import React, { Component } from 'react';

class Foo extends Component {
    ...
}

Is there any difference between the two (maybe in performance, for example)?

I have seen two ways of accessing Component:

import React from 'react';

class Foo extends React.Component {
    ...
}

and

import React, { Component } from 'react';

class Foo extends Component {
    ...
}

Is there any difference between the two (maybe in performance, for example)?

• javascript
• reactjs
• module
• ecmascript-6

Share Improve this question Follow edited Oct 1, 2017 at 10:31 T.J. Crowder 1.1m199199 gold badges2k2k silver badges1.9k1.9k bronze badges asked Oct 1, 2017 at 10:20 JoeTideeJoeTidee 26.1k2929 gold badges113113 silver badges163163 bronze badges 4

• 1 Read up on deconstructing assignments: developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Baruch Commented Oct 1, 2017 at 10:27
• @Baruch It's an import declaration, it has nothing to do with destructuring. – Bergi Commented May 5, 2018 at 21:02
• @Bergi I agree, it has nothing to do with "destructuring" (whatever that is). But, it is in fact deconstructing the object to obtain a specific property within that object. Mozilla MDN – Baruch Commented May 8, 2018 at 7:27
• @Baruch "Destructuring" is what you just linked, there is no "deconstruction". But no, an import declaration does not destructure any objects! – Bergi Commented May 8, 2018 at 10:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

Short answer: no.

Looking at it from the other side might make understanding easier.

If you imagine the react module itself - it might look something like this.

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

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

export default React;

Notice the use of export.

The default export is React, so it is accessed (or imported) in another module like this:

import React from 'react';

Component is a named export: Component, and so is accessed in another module via:

import { Component } from 'react';

But in this case Component is also attached to the React object. So you could use the imports in any of the following ways:

import React, { Component } from 'react';

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

A few other points worth mentioning:

• There can only be one default export per module, but you can export many variables.
• The default export can be named anything when you import it. For example import Cat from 'react';.
• You can rename named imports by doing the following: import { Component as Cat } from 'react';
• This behavior isn't specific to React, but is part of the ES6 module system.

In first example you got the whole exports through import React, and you call Component through react import. In second example you import Component separately from React. That's why you don't need to write React.Component. It's the same, but in different ways of import.

No, it's just a matter of what you import into the local namespace. If you already have something called Component locally, you wouldn't be able to do the latter. Other than that it's just preference, whether you want to list everything that's imported up top, or instead be able to easily see which module something is from at usage sites.

本文标签： javascriptAny difference between ReactComponent and ComponentStack Overflow