导入 React 与 React，{ 组件 }

Question

Import React 对比 Import React, { Component }

哪个更好，为什么？

或者除了以后少写代码之外没有任何区别？

写成{ Component }是不是只导入Component对象？

Answer 1

import React, { Component } 让您可以 class Menu extends Component 而不是 class Menu extends React.Component。它减少了 React 命名空间的输入和重复，这通常是一种理想的现代编码约定。

此外，Webpack 2 和 Rollup 等工具 "tree shaking," 意味着任何未使用的导出都不会捆绑到您的最终代码中。使用 import React/React.Component 你保证所有 React 的源代码都将被捆绑。使用 import { Component }，一些工具将仅捆绑使用 Component class 所需的代码，不包括 React 的其余部分。

上面的段落与这种特定情况无关，因为你总是需要在当前命名空间中有 React 来编写 JSX，但在其他情况下只导入你需要的确切模块最终可能会导致更小的捆绑代码.

除此之外，这完全是个人喜好。

Answer 2

这些是命名导入或命名空间导入。他们所做的基本上是将模块的内容复制到命名空间中，允许：

import React, { Component } from 'react';

class SomeComponent extends Component { ... }

通常情况下，我们会扩展React.Component，但由于组件模块被导入到命名空间中，我们可以直接用Component引用它，不需要React.。 React 模块全部导入，但是大括号内的模块是这样导入的，访问时不需要React命名空间前缀。

Answer 3

TLDR；

it's entirely personal preference.

请注意…

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

如果你想少打字，那么不要除了 React 之外还导入 Component。

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

打字比多：

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

即使你考虑自动完成。 ;)

导入 React 与 React，{ 组件 }

Import React vs React, { Component }

javascript

ecmascript-6

reactjs

react-jsx