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

Question

写作的主要好处是什么？

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

代替

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

说到15.4.x的反应？

在我的观点和我的观点中(如果我错了,请纠正我)从那时起根本没关系:

1. 我正在使用一个webpack2来制作我的捆绑包;
2. 我使用代码拆分将我的应用代码从供应商代码中分离出来;
3. 我使用webpack.optimize.CommonsChunkPlugin插件minChunks: Infinity设置,以确保所有供应商代码只包含一次.

从了解ES6导入如何工作我明白通过使用命名导入{Component}I状态,我想Component在我的代码中只使用组件,看起来更干净.但由于整个React包仍然在应用程序中使用,我可以使用扩展React.Component而不是仅仅创建我的类,Component结果webpack仍将生成相同数量的代码,并且在两种情况下我的包大小都是相同的.

我对么？

Answer 1

没有区别,React.Component是同一个对象Component,第二种方式在我看来更有说服力,因为它确实解释了你正在使用库中的Component对象React.

第一个似乎是引用一个成员,但它来自pre modules erajavascript,其中所有内容都必须附加到导出的全局命名空间(只是为了避免全局命名空间污染).

可以在引擎盖下的东西:

// 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)

Answer 2

这个进口声明:

import React, { Component } from 'react';

真的是做了两件事.它default在名称下导入导出React(这只是一个约定,你可以称之为你想要的).它还导入一个命名导出Component.

React导入默认值的原因实际上是为了使JSX工作.当您的JSX代码transpiled,那么它替代<div>了React.DOM.div(),所以React必须存在,否则事情打破!

单独导入这两个东西意味着您的JSX可以工作,但您可以编写代码Component而不是React.Component代码.

当你做import任何事情from "react",那么整个文件将被包括在内 - 任何减少包大小的尝试(例如死代码消除,树抖动)都是一个额外的单独步骤,它不依赖于你的import语句但是您使用的代码部分.

在这个库的情况下,理智的事情发生:Component默认导出的子节点与指定的导出相同Component.

但是,请记住,这不能保证是这种情况!如果React库代码包含以下内容:

export default {
    Component: "foo"
};

export const Component = "bar";

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