Отрисовка компонентов React в DOM

Question

1) Когда вы создаете приложение с помощью create-response-app, будет ли весь код в каждом методе рендеринга компонента быть упакован в один файл и загружен сразу в DOM? Или загружаются, когда нужны? Если да, то какие компоненты загружаются раньше, а какие позже?

2) Если все загружается сразу, когда оно вводится в узел root с помощью метода React.render (), тогда что в чем смысл метода жизненного цикла componentDidMount? Разве все не будет монтироваться одновременно, если все будет просто введено вместе и станет частью дерева DOM при начальной загрузке?

Answer 1

Create-React-app предоставляет вам мощные предустановленные конфигурации, поэтому вам не нужно настраивать проект React с нуля. Вам не нужно устанавливать веб-пакет, пакеты по умолчанию, конфигурацию lint, структуру папок и так далее. Со временем вы сможете внести изменения, если почувствуете себя комфортно. Или вы можете даже начать с нуля, но для новичка это может быть непросто.

Компоненты в react создаются и импортируются по мере необходимости, начиная с точки root в файле html. Точка входа root будет служить ориентиром для реагирования на создание точки входа, и из нее будет строиться виртуальная модель DOM и создавать другие компоненты по мере необходимости, а не все сразу.

Между тем, Webpack компилирует все файлы и каталоги в один файл на основе входного файла, который вызывает остальные. Без webpack или подобного у вас не было бы хорошей структуры папок для разработки вашего реагирующего проекта.

С этого момента react обрабатывает виртуальную модель DOM, чтобы управлять состоянием компонентов и обновлять реквизиты через жизненные циклы компонентов, делая правильное сравнение, чтобы избежать ненужных повторных рендеров, и при необходимости удаляя компоненты. Если бы все было визуализировано сразу, у вас был бы файл stati c, в котором не было бы необходимости в использовании response или подобного spa.