导入 React 与 React，{ 组件 }答案

【问题标题】：Import React vs React, { Component }导入 React 与 React，{ 组件 }
【发布时间】：2017-01-14 15:15:46
【问题描述】：

Import React 与 Import React, { Component }

哪个更好，为什么？

或者除了以后写更少的代码之外没有什么不同吗？

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-jsx

【解决方案1】：

TLDR;

这完全是个人喜好。

只是一个注释……

import React, { Component } 让你做class Menu extends Component 而不是class Menu extends React.Component。打字少了……

如果你想减少打字，那么不要在 React 之外导入 Component。

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

比以下更多输入：

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

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

【讨论】：

【解决方案2】：

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，但在其他情况下仅导入您需要的确切模块可能会导致最终捆绑的代码更小。

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

【讨论】：

所以我还在导入 PropTypes 和 React 附带的所有其他东西？我不是只是在导入组件吗？
@epiqueras 您正在导入所有内容，但组件的导入方式不需要将其引用为React.Component，而是只需Component
仅供参考，即使你只是在做{ Component } from 'react'，你的捆绑器仍然会捆绑整个依赖，所以如果你担心大小，这不是减少它的方法。
@AndrewL。这种类型的导入有名称吗？
这只是将 React 命名空间中的任何内容作为可以使用的变量导入的简写。如果你愿意，你也可以import React, { PropTypes, Component } from 'react'。如果这没有回答您的问题，请编辑问题更具体，StackOverflow 不适合来回聊天类型的答案。

【解决方案3】：

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

import React, { Component } from 'react';

class SomeComponent extends Component { ... }

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

【讨论】：