Co to jest Reakcja importowania korzyści, {Komponent} zamiast po prostu Reagować?

Question

Co jest główną zaletą pisania

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

zamiast

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

jeśli chodzi o reagowanie 15.4.x ??

W mojej perspektywy i w moim przypadku (poprawcie mnie jeśli się mylę) to nie ma znaczenia, w ogóle od:

1. Używam webpack2 za umożliwienie mi wiązek;
2. Używam dzielenia kodu, aby podzielić kod aplikacji od kodu dostawcy;
3. Używam wtyczki webpack.optimize.CommonsChunkPlugin z ustawieniem minChunks: Infinity, aby upewnić się, że cały kod dostawcy jest zawarty tylko raz.

Od zrozumienia jak działa import ES6 Rozumiem, że za pomocą nazwie import {Component} Oświadczam, że chcę używać tylko Component komponent w moim kodu, który wygląda .. czystsze. Ale ponieważ cały pakiet nadal jest używany w aplikacji, mogę utworzyć moje klasy z rozszerzeniem od React.Component zamiast tylko Component, w wyniku czego pakiet webowy nadal będzie generował taką samą ilość kodu, a mój rozmiar pakietu będzie taki sam w obu przypadkach.

Czy mam rację?

Answer 1

Nie ma różnicy, React.Component jest taki sam przedmiot jak Component, drugi sposób jest bardziej wymowny moim zdaniem, bo to naprawdę wyjaśnia, że ​​używasz Component obiekt z biblioteki React.

Pierwszy z nich wydaje się odnosić do członka, jednak, że pochodzi z pre modules era javascript, gdzie wszystko musiało być dołączone do eksportowanego globalnej przestrzeni nazw (tylko w celu uniknięcia zanieczyszczenia globalnej przestrzeni nazw).

---

coś, co może być pod maską:

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

Uwaga: jak ktoś powiedział, trzeba także import React ponieważ JSX musi mieć go na zakres, ale jeśli chcesz aby tego uniknąć, można narazić React globalnie (window.React = React)

Answer 2

To oświadczenie import:

import React, { Component } from 'react'; 

Naprawdę robi dwie rzeczy. Importuje eksport default, pod nazwą React (co jest tylko konwencją, możesz nazwać to, czego chcesz). Importuje również nazwany eksport, Component.

Powodem, dla którego zaimportowano domyślnie React, jest fakt, że JSX działa.Kiedy twój kod JSX jest transpiled, to musi on zastępować , więc musi istnieć inaczej.

Importowanie obu rzeczy osobno oznacza, że ​​Twój JSX działa, ale zamiast pisać Component zamiast kodu React.Component.

Gdy zrobisz import wszystko, co import, to cały plik zostanie włączony w dowolny sposób - każda próba zmniejszenia rozmiaru pakietu (np. Eliminacja martwego kodu, drżenie drzewa) jest dodatkowym, osobnym krokiem, który nie zależy od instrukcji importu, ale od części kodu, którego używasz.

---

W przypadku tej biblioteki sane coś się dzieje: dziecko Component domyślnego eksport odnosi się do tego samego, co w nazwie eksportu Component.

Pamiętaj jednak, że nie jest to gwarantowane! Jeśli React kod biblioteka zawierała następujące elementy:

export default { 
    Component: "foo" 
}; 

export const Component = "bar"; 

Then React.Component === "foo" i Component === "bar".