导入 React, {Component} 而不仅仅是 React 有什么好处？答案

【问题标题】：What is the benefit importing React, {Component} instead of just React?导入 React, {Component} 而不仅仅是 React 有什么好处？
【发布时间】：2017-11-14 22:23:51
【问题描述】：

写作的主要好处是什么

import React, { Component } from 'react';
class Link extends Component {
   ...
}

而不是

import React from 'react';
class Link extends React.Component {
   ...
}

什么时候反应 15.4.x??

我的观点和我的情况（如果我错了，请纠正我），因为：

我正在使用webpack2 来制作我的捆绑包；
我使用代码拆分将我的应用代码与供应商代码分开；
我使用 webpack.optimize.CommonsChunkPlugin 插件和 minChunks: Infinity 设置来确保所有供应商代码只包含一次。

通过了解 ES6 导入的工作原理，我了解到通过使用 {Component} 的命名导入，我声明我只想在我的代码中使用 Component 组件，这看起来......更干净。但是由于整个React 包仍然在应用程序中使用，我可以创建具有React.Component 扩展名的类，而不仅仅是Component，结果webpack 仍然会产生相同数量的代码，我的包大小将是两种情况都一样。

我说的对吗？

【问题讨论】：

这是一个偏好问题（例如，我更喜欢Component 而不是React.Component 表示法）

标签： javascript reactjs ecmascript-6

【解决方案1】：

没有区别，React.Component 和Component 是同一个对象，在我看来，第二种方式更有说服力，因为它确实说明您使用的是来自React 库的Component 对象。

第一个似乎是指一个成员，但是，它来自 javascript 的 pre modules era，其中所有内容都必须附加到导出的全局命名空间（只是为了避免全局命名空间污染）。

可能在幕后的东西：

// this should be assumed as an example only.

class React { ... }
class Component { ... }


React.Component = Component;

// ES6
export {Component}
export default React;

// ES5
window.React = React;

注意：正如有人所说，您还需要导入React，因为JSX需要在范围内，但是，如果您想避免它，您可以全局公开React（window.React = React）

【讨论】：

【解决方案2】：

这个导入语句：

import React, { Component } from 'react';

实际上是在做两件事。它以React 的名称导入default 导出（这只是一个约定，您可以随意称呼它）。它还导入一个命名的导出，Component。

之所以导入默认的React，其实是为了让JSX工作。当您的 JSX 代码被转译时，它会将 <div> 替换为 React.DOM.div()，因此 React 必须存在，否则事情会中断！

分别导入这两个东西意味着您的 JSX 可以工作，但您可以在代码中编写 Component 而不是 React.Component。

当您执行import 任何from "react" 时，无论哪种方式都将包含整个文件 - 任何减小包大小的尝试（例如死代码消除、Tree Shaking）都是一个额外的单独步骤，它不取决于您的导入语句，而是您使用的代码部分。

在这个库的情况下，发生了正常的事情：默认导出的子 Component 与命名导出 Component 引用相同的东西。

但是，请记住，我们不能保证一定是这样！如果 React 库代码包含以下内容：

export default {
    Component: "foo"
};

export const Component = "bar";

然后是React.Component === "foo" 和Component === "bar"。

【讨论】：