Блог

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

Например;

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

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

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

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

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

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

~ 15.2.1.17

2. Модуль If.[[Статус]] «вычисляется», затем
a. Модуль If.[[Ошибка вычисления]] не определено, возвращает индекс.
b. В противном случае верните модуль.[[Ошибка вычисления]].
[3]. Модуль If.[[Статус]] «оценивается», возвращает индекс.
[4]. Утверждение: модуль.[[Статус]] «создан экземпляр».
[5]. Установите модуль.[[Статус]] на «оценивающий».
… разрыв …
[12]. Утверждение: модуль встречается в стеке ровно один раз.

~ 15.2.1.16.5.1

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