「React」の代わりに「React」、「Component」をインポートする利点は何ですか？

Question

それは15.4.xを反応させるために来るとき

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

代わりの

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

を書くの主な利点は何ですか？私の場合は

私の観点で

とので、それは問題では全くない（私が間違っているなら、私を修正）：私は私のバンドルを作るためのwebpack2を使用してい

1. 。
2. コード分割を使用して、自分のアプリケーションコードをベンダーコードから分割します。
3. minChunks: Infinity設定のwebpack.optimize.CommonsChunkPluginプラグインを使用して、すべてのベンダーコードが1回だけ含まれていることを確認します。

ES6の輸入は、私が{Component}の名前のインポートを使用することによって、私は私が..きれいに見える私のコードでのみComponentコンポーネントを使用したいと述べていることを理解しどのように機能するかを理解することから。 しかし、アプリケーション全体でReactパッケージがまだ使用されているので、Componentではなく、React.Componentの拡張子を持つクラスを作成することができます。結果webpackでは同じ量のコードが生成され、バンドルサイズはどちらの場合も同じになります。

正しいですか？

Answer 1

違いはありません、React.Componentはそれが本当にあなたがReactライブラリからComponentオブジェクトを使用していることを説明するため、2番目の方法は、私の意見では、より説得力のある、Componentと同じオブジェクトです。

最初のメンバーは ですが、javacriptの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; 

注：誰かが言ったようにあなたがしたい場合、あなたはまた、スコープにそれを持ってReactJSXためのニーズをインポートする必要がありますが、それを避けるために、あなたはグローバル（window.React = React）

Answer 2

Reactを公開することができ、このimport文：

import React, { Component } from 'react'; 

は本当に2つのことをしています。それはdefaultの輸出をReactの名前で輸入します（これは慣習であり、あなたが望むものと呼ぶことができます）。また、名前付きエクスポート、Componentをインポートします。

デフォルトのReactをインポートするのは、実際にJSXを動作させるためです。あなたのJSXコードは、React.DOM.div()の代わりに<div>の代わりになるので、Reactが存在する必要があります。

両方を別々に読み込むことは、JSXが機能することを意味しますが、React.Componentの代わりにComponentと書くことができます。

import何かfrom "react"を実行すると、ファイル全体がどちらかに含まれるようになります。バンドルサイズを減らす試み（デッドコードエリミネーション、ツリーシェーキングなど）は、追加の個別ステップです。インポートステートメントに依存しますが、使用するコードの部分に依存します。このライブラリの場合

---

、まともなことが起こります：デフォルトのエクスポートの子Componentは、名前の輸出Componentと同じものを指します。

ただし、これが保証されるわけではありません。リアクトライブラリのコードが含まれている場合は、以下：

export default { 
    Component: "foo" 
}; 

export const Component = "bar"; 

その後React.Component === "foo"とComponent === "bar"を。