Что такое {Component}? И для чего оно в конкретном примере?

Question

[nathan111777]

На сайтах пишут:
import React from 'react';
Тоесть, импортируем объект React из библиотеки React

Увидел пример где код написан таким образом:
import React, {Component} from 'react';
Что такое {Component} ? И для чего оно?

Comments

[Andrey Suha]

Что такое компонент здесь, а в данном случае это тоже самое что и React.Component

Answer 1

[Mikhail Osher]

Это называется named export. Изюминка в том, что у React есть только default export.
Вопрос - как оно тогда работает, если это named export, а у React только default?

Ответ в том, что React поставляется как CommonJS версия, а не ESModule.
Можно увидеть в исходниках, что везде в конце пишется "module.exports = React"
https://unpkg.com/react@16.8.6/index.js
https://unpkg.com/react@16.8.6/cjs/react.development.js
https://unpkg.com/react@16.8.6/cjs/react.productio...

Дальше происходит магия (вероятно, вебпака), и получается, что default export дополнительно продублирован named export'ами.

Смотрите пример: https://codesandbox.io/embed/charming-wilbur-b6fwo

Я везде пишу React и всем советую.
И по поводу "меньше символов":

// 70 chars
import React from 'react';
export class Foo extends React.Component {};

// 79 chars
import React, { Component } from 'react';
export class Foo extends Component {};

Answer 2

[0xD34F]

Импорт React.Component.

Для чего? - Ну, ОЧЕВИДНО, чтобы использовать его при определении классового компонента.

Answer 3

[Alexander Pushkarev]

Чтобы не писать extends React.Component а сразу extends Component

Прочитайте как работают импорты - https://developer.mozilla.org/ru/docs/Web/JavaScri...

Comments

[nathan111777]

тоесть когда:
import React from 'react';
компонент создается вот так:
class Info extends React.Component

а когда:
import React, {Component} from 'react';
тогда создается вот так:
class Info extends Component
правильно?

[Alexander Pushkarev]

nathan111777, да