{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что такое “монтирование”"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Монтирование"},{"type":"text","text":" — это процесс, при котором React:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создаёт экземпляр компонента (или вызывает функцию-компонент),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Генерирует Virtual DOM,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сравнивает его с реальным DOM (если нужно),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вставляет элементы в браузерный DOM,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вызывает все эффекты, связанные с монтированием ("},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"type":"text","text":")."}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Этапы монтирования по шагам"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1️⃣ React вызывает компонент"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если это "},{"type":"text","marks":[{"type":"bold"}],"text":"функциональный компонент"},{"type":"text","text":", React просто вызывает его как функцию:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function App() {\n console.log(\"🔹 Компонент вызван\");\n return

Hello

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если это "},{"type":"text","marks":[{"type":"bold"}],"text":"классовый компонент"},{"type":"text","text":", React создаёт экземпляр класса ("},{"type":"text","marks":[{"type":"code"}],"text":"new MyComponent()"},{"type":"text","text":"), вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"constructor()"},{"type":"text","text":" (если есть), затем — "},{"type":"text","marks":[{"type":"code"}],"text":"render()"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2️⃣ React строит Virtual DOM"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент возвращает JSX → React превращает его в "},{"type":"text","marks":[{"type":"bold"}],"text":"виртуальное дерево элементов"},{"type":"text","text":" (объекты в памяти)."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"return

Hello

;\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React создаёт внутреннее представление этого узла:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{\n type: 'div',\n props: { className: 'box', children: 'Hello' }\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3️⃣ React вставляет компонент в реальный DOM"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"На основании Virtual DOM React создаёт реальные DOM-элементы и добавляет их в документ."},{"type":"hardBreak"},{"type":"text","text":"То есть ты впервые “видишь” компонент на экране."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4️⃣ React вызывает "},{"type":"text","marks":[{"type":"bold"}],"text":"эффекты монтирования"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После того как DOM обновлён, React вызывает все хуки с пустыми зависимостями "},{"type":"text","marks":[{"type":"code"}],"text":"[]"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"useEffect(() => {\n console.log(\"✅ Монтирование\");\n}, []);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ Этот код выполнится "},{"type":"text","marks":[{"type":"bold"}],"text":"один раз"},{"type":"text","text":" — сразу после первого рендера и вставки в DOM."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Это аналог "},{"type":"text","marks":[{"type":"code"}],"text":"componentDidMount()"},{"type":"text","text":" в классовых компонентах."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"5️⃣ React вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"type":"text","text":" (если есть)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если ты используешь "},{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"type":"text","text":", он сработает "},{"type":"text","marks":[{"type":"bold"}],"text":"сразу после того, как DOM создан, но до “покраски” (paint)"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это полезно для измерения элементов или синхронизации позиций."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"useLayoutEffect(() => {\n const size = ref.current.getBoundingClientRect();\n console.log(\"Размеры:\", size);\n}, []);\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Что обычно делают при монтировании"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Задача"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Инструмент"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загружают данные из API"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useEffect(() => {...}, [])"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Настраивают таймеры / интервалы"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useEffect(() => { const id = setInterval(...); return () => clearInterval(id); }, [])"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Добавляют обработчики событий (scroll, resize)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"window.addEventListener()"},{"type":"text","text":" в "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Измеряют размеры элементов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect()"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Инициализируют библиотеки (например, Chart.js, Leaflet, Swiper)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useEffect(() => { initLib(); }, [])"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📦 Пример"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useEffect, useState } from \"react\";\n\nfunction UserList() {\n const [users, setUsers] = useState([]);\n\n useEffect(() => {\n console.log(\"🟢 Компонент смонтирован — загружаем данные...\");\n fetch(\"/api/users\")\n .then(res => res.json())\n .then(setUsers);\n }, []); // ← пустые зависимости → сработает 1 раз при монтировании\n\n return (\n

{u.name}

\n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Здесь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент "},{"type":"text","marks":[{"type":"bold"}],"text":"рендерится впервые"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React вставляет "},{"type":"text","marks":[{"type":"code"}],"text":"

{u.name}

Что происходит при монтировании компонента?

Комментарии