Точечная запись в импорте React

Question

Я видел, что многие реагирующие фреймворки рекомендуют при импорте использовать точечную нотацию.
Например, вместо

import Y from 'X/Y';  
<Y />  

они будут использовать:

import X from 'X';  
<X.Y />

Из того, что я тестировал , они оба работают.
Мой вопрос в том, в чем, если таковые имеются, различия?
Особенно, если, скажем, вам нужно использовать только Y, будет ли вторая запись импортировать ненужные данные, так как вы не нужен X? Будете ли вы использовать вторую запись только в тех случаях, когда вы будете использовать и X, и Y, а не только Y?

Answer 1

Они не идентичны, но иногда могут иметь идентичный результат.

import Y from 'X/Y'

Это говорит о том, что импортируйте файл по пути X/Y и сохраните экспорт по умолчанию в качестве локальной константы Y. X может быть установленным npm модулем, и в этом случае вы просматриваете его структуру каталогов, чтобы найти конкретный файл.

import X from 'X'

Это говорит об импорте файла по пути X и сохранении экспорт по умолчанию в качестве локальной константы X. Это , импортирующий другой файл целиком .

Теперь, если X будет выглядеть примерно так:

import Y from './Y'
export default {
  other: { stuff: true },
  Y,
}

Тогда вы сможете легко получить доступ к X.Y. Но нет никакой гарантии, что он реализован таким образом.

Когда вы импортируете модуль без детализации, вы импортируете структуру, которую автор модуля намеревался представить. Это может сильно отличаться от структуры каталогов реализации модуля. Теоретически, внутренний рефакторинг, который вообще не изменяет экспортируемый интерфейс, может повредить ваш код, если вы импортируете его внутренние файлы.

Вот почему вы должны следовать указаниям модуля о том, как его импортировать.

---

Теперь предположим, что это был ваш модуль:

export const Y = 'I am Y'
export default 'I am the default export of X'

Затем вы можете импортировать это так:

import X from 'X'   // X === 'I am the default export of X'
import {Y} from 'X' // Y === 'I am Y' 

console.log(X.Y)    // undefined. Y is not a property of the default export.