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，您可以保证捆绑所有React的源代码。对于import { Component }，某些工具只会捆绑使用Component类所需的代码，不包括React的其余部分。

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

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

Answer 2

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

import React, { Component } from 'react';

class SomeComponent extends Component { ... }

通常，我们会扩展React.Component，但由于组件模块已导入命名空间，我们只能使用Component引用它，不需要React.。导入了所有React模块，但是大括号内的模块的导入方式使得访问时不需要React名称空间前缀。

Answer 3

TLDR;

完全是个人偏好。

只是一张纸条......

import React, { Component }可让您class Menu extends Component 而不是class Menu extends React.Component。打字少了......

如果您想减少输入次数，那么除了React之外，不要导入组件。

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

输入更多：

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

即使您考虑自动完成。 ;）

导入React vs React，{Component}

3 个答案: