前端踩坑(二)--------------------------Import React vs React, { Component }

转载https://stackoverflow.com/questions/39361282/import-react-vs-react-component

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/React.Component you are guaranteeing all of React's source code will be bundled. With import { Component }, some tools will only bundle the code needed to use the Component class, excluding the rest of 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. ;)

看完发现这两种区别是为了减少码农们的输入量研究的,  导入所需要的内容,现代编码约束:)