Какая польза импортирует React, {Component} вместо просто React?

В чем основное преимущество написания

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 все равно произведет такое же количество кода, и размер моего пакета будет то же самое в обоих случаях.

Правильно ли я?

Ответ 1

Нет разницы, React.Component - это тот же объект, что и Component, второй способ более красноречив, на мой взгляд, потому что он действительно объясняет, что вы используете объект Component из библиотеки React.

Первый, по-видимому, относится к члену, но он исходит из pre modules era javascript, где все должно быть привязано к экспортируемому глобальному пространству имен (просто чтобы избежать глобального загрязнения пространства имен).

то, что может быть под капотом:

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

действительно делает две вещи. Он импортирует экспорт default под именем React (это просто соглашение, вы можете назвать его тем, что хотите). Он также импортирует именованный экспорт, Component.

Причина, по которой импортируется по умолчанию React, на самом деле должна заставить JSX работать. Когда ваш код JSX переполняется, он заменяет <div> на React.DOM.div(), поэтому React должен существовать иначе, чем что-то ломается!

Импортирование обеих вещей по отдельности означает, что ваш JSX работает, но вы можете написать Component вместо React.Component в своем коде.

Когда вы выполняете import что-либо from "react", тогда весь файл будет включен в любой путь - любая попытка уменьшить размер пакета (например, "Устранение мертвого кода", "Встряска дерева" ) является дополнительным отдельным шагом, который не зависит от ваших операторов импорта, а от частей используемого вами кода.

В случае этой библиотеки происходит разумная вещь: дочерний Component экспорта по умолчанию относится к тому же, что и названный export Component.

Однако имейте в виду, что это не гарантируется! Если код библиотеки React содержит следующее:

export default {
    Component: "foo"
};

export const Component = "bar";

Затем React.Component === "foo" и Component === "bar".