Import React vs Import React, { Component }

Which one is better and why?

Or does it make no difference other than writing less code later on?

Does writing { Component } mean it only imports the Component object?

匯入React與匯入React，{Component}

哪一個更好，為什麼？

或者除了稍後編寫更少的程式碼之外它沒有任何區別？

寫{Component}是否意味著只匯入Component物件？

import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component. It's less typing and duplication of the React namespace, which is generally a desired modern coding convention.

Additionally, tools like Webpack 2 and Rollup do "tree shaking," meaning any unused exports are not bundled into your final code. With import React

The above paragraph is irrelevant in this specific case, because you always need to have React in the current namespace to write JSX, but only importing the exact modules you need in other cases may lead to smaller bundled code in the end.

Beyond that it's entirely personal preference.

16.7k66096

• So I'm still importing PropTypes and everything else that comes with React? It's not like I'm just importing Component? – epiqueras Sep 7 '16 at 4:41 

• @epiqueras You are importing everything, but Component is imported in a way that you don't need to reference it as React.Component, but instead, just Component – Li357 Sep 7 '16 at 4:43

• Just fyi, even if you were just doing { Component } from 'react', your bundler will still bundle the ENTIRE dependency so if you were worried about size, this isn't the way to reduce it. – ZekeDroid Sep 7 '16 at 4:44

• @AndrewL. Is there a name for this type of import? – epiqueras Sep 7 '16 at 4:44

• It's just shorthand to import anything on the React namespace as a variable you can use. You can also import React, { PropTypes, Component } from 'react' if you want. If this didn't answer your question please edit the question to be more specific, StackOverflow is not good for back and forth chat type answers. – Andy Ray Sep 7 '16 at 4:45 

What these are are named imports or namespace imports. What they do is basically copy over the module's contents into the namespace allowing:

import React, { Component } from 'react';

class SomeComponent extends Component { ... }

Normally, we'd extend React.Component, but since the Component module is imported into the namespace, we can just reference it with Component, React. is not needed. All React modules are imported, but the modules inside the curly brackets are imported in such a way that the Reactnamespace prefix is not needed when accessing.

it's entirely personal preference.

Just a note…

import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component. It's less typing…

If you want to do less typing, then don't import Component in addition to React.

import React, { Component } from 'react';
class Menu from Component {

is more typing than:

import React form 'react';
class Menu from React.Component {

even if you consider auto-completion. ;)