Повтор импорта приложения React
Мне интересно, для приложений React, происходит ли import на компоненте во время выполнения? При разработке приложений React обычно весь код React объединяется в один файл, и это заставило меня задаться вопросом, происходит ли импорт компонента каждый раз, когда компонент монтируется.
Например;
import About from '../components/About';
class About extends React.component {
render() {...}
}
Когда весь код собран и во время производства или разработки, компонент About импортируется только один раз или каждый раз при монтировании компонента?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Импорт модуля ES6 происходит во время сборки, поэтому компонент будет связан с другим кодом еще до того, как он будет запущен. Импорт обрабатывается до оценки кода и не может быть динамическим.
import оценка должна происходить только один раз в ECMA-262, 9-е издание, июнь 2018 г. Спецификация языка ECMAScript® 2018, а именно в 15.2.1.16.5.1 Оценка внутреннего модуля и в 15.2.1.17 Семантика среды выполнения: HostResolveImportedModule:
- This operation must be idempotent if it completes normally. Each time it is called with a specific
referencingModule,specifierpair as arguments it must return the same Module Record instance. Multiple differentreferencingModule,specifierpairs may map to the same Module Record instance. The actual mapping semantic is implementation-defined but typically a normalization process is applied tospecifieras part of the mapping process. A typical normalization process would include actions such as alphabetic case folding and expansion of relative and abbreviated path specifiers.
2. If module.[[Status]] is "evaluated", then
a. If module.[[EvaluationError]] is undefined, return index.
b. Otherwise return module.[[EvaluationError]].
[3]. If module.[[Status]] is "evaluating", return index.
[4]. Assert: module.[[Status]] is "instantiated".
[5]. Set module.[[Status]] to "evaluating".
...snip ...
[12]. Assert: module occurs exactly once in stack.
Если вы транспилируете, то транспилятор (например, веб-пакет) отвечает за обеспечение того, чтобы ваш пакет соответствовал ожидаемой семантике, «определяемой реализацией» (в большинстве случаев, как Node/браузер будет дедуплицировать запросы для specifier).
То, как они загружаются, зависит от вашего упаковщика. С точки зрения спецификации нет окончательной концепции (пока) модулей, отличных от JS. Существует несколько способов загрузки модулей CSS-to-JS мая: от «один раз, так же, как модули JS» для подхода веб-пакета style-loader до «монтирования и размонтирования, как компоненты» для определенных подходов компонентов более высокого порядка, используемых такими вещами, как эмоция / стиль-компоненты, чтобы «никогда, CSS не находится в отдельном файле, за загрузку которого вы отвечаете», как при использовании веб-пакета css-loader с плагином mini-css-extract.
Если это происходит только один раз, знаете ли вы, как загружаются модули CSS в JS? Я думал, что файлы SASS, импортируемые в файлы компонентов React, будут импортироваться каждый раз при монтировании этого конкретного компонента, предотвращая конфликт стилей CSS.