导入React vs React,{Component}

Question

Import React VS Import React, { Component }

哪一个更好,为什么？

或者除了稍后编写更少的代码之外它没有任何区别？

写作是否{ Component }意味着它只导入Component对象？

Answer 1

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

此外,像Webpack 2和Rollup这样的工具会"树摇动",这意味着任何未使用的导出都不会捆绑到您的最终代码中.随着import React/ React.Component你是保证所有阵营的源代码将被捆绑.随着import { Component },有些工具只会捆绑使用所需的代码Component类,不包括阵营的其余部分.

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

除此之外,这完全是个人偏好.

Answer 2

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

import React, { Component } from 'react';

class SomeComponent extends Component { ... }

通常，我们会扩展React.Component，但是由于 Component 模块已导入到命名空间中，因此我们只需使用Component,React.来引用它，就不需要了。所有 React 模块都被导入，但大括号内的模块是以这样一种方式导入的，即React访问时不需要命名空间前缀。