Реагировать на повторение импорта приложения

Question

Мне интересно, для приложений React, import на компоненте происходит во время выполнения? При разработке приложений React, как правило, весь код React объединен в один файл, и это заставляет меня задуматься, происходит ли импорт компонента каждый раз, когда компонент монтируется.

Например;

import About from '../components/About';

class About extends React.component {
   render() {...}
}

Когда весь код связан и во время производства или разработки, компонент About импортируется только один раз или каждый раз, когда компонент монтируется?

Answer 1

import оценка указана только один раз в ECMA-262, 9-е издание, июнь 2018 г. Спецификация языка ECMAScript® 2018 - особенно в 15.2.1.16.5.1 InnerModuleEvaluation и 15.2.1.17 Семантика времени выполнения: HostResolveImportedModule :

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

~ 15.2.1.17

2 .Если модуль. [[Status]] «оценен», то
a.Если модуль. [[EvaluationError]] не определен, вернуть индекс.
b.В противном случае верните модуль. [[EvaluationError]].
[3].Если модуль. [[Status]] «оценивает», вернуть индекс.
[4].Утверждение: модуль. [[Status]] "создан".
[5].Установите для модуля. [[Status]] значение «вычисления».
... snip ...
[12].Утверждение: модуль встречается ровно один раз в стеке.

~ 15.2.1.16.5.1

Если вы перемещаетесь, то транспортер(например, webpack) отвечает за то, чтобы ваш пакет соответствовал ожидаемой «определенной реализацией» семантике (в большинстве случаев, как Node / браузер будет дублировать запросы на specifier).

Answer 2

Импорт модуля ES6 происходит во время сборки, поэтому компонент будет связан с другим кодом еще до его запуска.Импорт обрабатывается до оценки кода и не может быть динамическим.