Frontend | Вопросы собесов

В чем различие между строчными и блочными элементами ? Спросят с вероятностью 7% Различие между строчными (inline) и блочными (block) элементами заключается в их поведении на странице, а именно в том, как они занимают пространство и взаимодействуют с другими элементами. Блочные элементы (Block Elements) Основные характеристики: 1️⃣Занимают всю доступную ширину: ✅Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину контейнера, в котором он находится, по умолчанию. 2️⃣Можно задавать размеры: ✅Для блочных элементов можно задавать ширину (width), высоту (height), внутренние отступы (padding), внешние отступы (margin). 3️⃣Вложенные элементы: ✅Блочные элементы могут содержать другие блочные и строчные элементы. ✅<div> ✅<p> ✅<h1>, <h2>, ..., <h6> ✅<ul>, <ol>, <li> ✅<header>, <footer>, <section>, <article> Пример:

<div style="background-color: lightblue;">
  Это блочный элемент.
</div>
<p style="background-color: lightgreen;">
  Это тоже блочный элемент.
</p>

Строчные элементы (Inline Elements) Основные характеристики: 1️⃣Не занимают всю ширину: ✅Строчные элементы не начинаются с новой строки и занимают только необходимое для их содержимого пространство. Они располагаются рядом с другими строчными элементами на одной строке. 2️⃣Размеры и отступы: ✅Для строчных элементов нельзя задавать ширину и высоту. Внутренние отступы (padding) и внешние отступы (margin) применяются только по горизонтали, вертикальные отступы не изменяют размер строчного элемента, но могут влиять на расстояние между элементами. 3️⃣Только строчные вложенные элементы: ✅Внутрь строчных элементов можно вкладывать только другие строчные элементы. Примеры строчных элементов: ✅<span> ✅<a> ✅<img> ✅<strong> ✅<em> ✅<input> Пример:

<span style="background-color: lightcoral;">
  Это строчный элемент.
</span>
<a href="#" style="background-color: lightgoldenrodyellow;">
  Это тоже строчный элемент.
</a>

Сравнение элементов 1️⃣Размещение на странице: ✅Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину. ✅Строчные элементы размещаются в строку с другими строчными элементами и занимают только необходимое пространство. 2️⃣Вложенность: ✅Блочные элементы могут содержать как блочные, так и строчные элементы. ✅Строчные элементы могут содержать только строчные элементы. 3️⃣Размеры и отступы: ✅Для блочных элементов можно задавать любые размеры и отступы. ✅Для строчных элементов можно задавать только горизонтальные отступы, ширину и высоту задавать нельзя. Блочные элементы:

<div>
  <h1>Заголовок</h1>
  <p>Параграф текста внутри блочного элемента.</p>
</div>

Строчные элементы:

<p>
  Этот текст содержит <a href="#">ссылку</a> и <strong>жирный текст</strong>, которые являются строчными элементами.
</p>

✅Блочные элементы занимают всю ширину контейнера, начинаются с новой строки и могут содержать любые другие элементы. ✅Строчные элементы занимают только необходимое пространство, располагаются в одной строке с другими строчными элементами и могут содержать только другие строчные элементы. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что такое слоты ? Спросят с вероятностью 7% Слоты — это механизм, используемый во фронтенд-разработке, особенно в компонентах, для предоставления гибких способов вставки содержимого в компоненты. Слоты позволяют передавать HTML-контент в компоненты и определять, где этот контент должен быть отрендерен. Они особенно полезны в библиотеке Vue.js, а также в других современных фреймворках, таких как Svelte. Vue.js Слоты используются для создания динамических и гибких компонентов. 1️⃣Базовый слот: ✅Позволяет вставлять произвольное содержимое в компонент.

<!-- Родительский компонент -->
<my-component>
  <p>Это вставленное содержимое!</p>
</my-component>

<!-- Дочерний компонент -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

2️⃣Именованные слоты: ✅Позволяют вставлять содержимое в конкретные места внутри компонента.

<!-- Родительский компонент -->
<my-component>
  <template v-slot:header>
    <h1>Заголовок</h1>
  </template>
  <template v-slot:footer>
    <p>Подвал</p>
  </template>
</my-component>

<!-- Дочерний компонент -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- Слот по умолчанию -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

3️⃣Слоты с областью видимости (Scoped Slots): ✅Позволяют передавать данные из дочернего компонента в родительский через слот.

<!-- Родительский компонент -->
<my-component>
  <template v-slot:default="slotProps">
    <p>{{ slotProps.message }}</p>
  </template>
</my-component>

<!-- Дочерний компонент -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Привет из дочернего компонента!',
    };
  },
};
</script>

Преимущества 1️⃣Гибкость: ✅Слоты позволяют создавать более гибкие и многоразовые компоненты, которые можно адаптировать под различные контексты использования. 2️⃣Повторное использование: ✅Компоненты со слотами можно легко переиспользовать в различных частях приложения с разным содержимым. 3️⃣Читаемость и структурирование кода: ✅Использование слотов помогает лучше структурировать код, разделяя шаблоны компонентов и их содержимое. 4️⃣Поддержка различных сценариев рендеринга: ✅Слоты позволяют легко поддерживать различные сценарии рендеринга, такие как именованные и scoped слоты, что делает компоненты более мощными и универсальными. Svelte В нем слоты также используются для вставки содержимого в компоненты.

<!-- Родительский компонент -->
<ChildComponent>
  <p>Это вставленное содержимое!</p>
</ChildComponent>

<!-- Дочерний компонент (ChildComponent.svelte) -->
<script>
  export let name;
</script>

<slot></slot>

Слоты — это механизм для вставки контента в компоненты, который делает компоненты гибкими и многоразовыми. Они позволяют определять, где именно внутри компонента должно быть размещено передаваемое содержимое. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Привет! Хочешь научиться хорошо и быстро разрабатывать крутые сайты и проекты? Тогда канал «Будни разработчика» для тебя! Подпишись, и узнаешь: ➕ как влиться во фронтенд ➕ как организовать работу ➕ как писать хороший код Ждём! ⬇️

Большая конференция Яндекс Рекламы на ВТБ Арене 22 октября приглашаем маркетологов и специалистов по рекламе обсудить новые технологии и рекламные тренды. Ключевые участники рынка поделятся опытом и расскажут: ✅ Как развиваться специалистам в сфере рекламы ✅ Как продвигаться и продавать в интернете ✅ Какие тренды в маркетинге появляются сейчас Вас ждут доклады на актуальные темы, конкурсы и возможности для нетворкинга. Встречаемся 22 октября на ВТБ Арене. Будем вести прямую трансляцию — вы сможете посмотреть выступления, даже если не планируете приехать лично. Конференция бесплатная, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

Что думаешь про ssr ? Спросят с вероятностью 7% Server-Side Rendering (SSR) — это метод рендеринга веб-страниц на сервере перед их отправкой в браузер клиента. В отличие от Client-Side Rendering (CSR), где основная работа по рендерингу выполняется на стороне клиента, SSR позволяет создать HTML-код страницы на сервере и отправить его уже готовым для отображения в браузере. Преимущества 1️⃣Улучшение SEO: ✅Поисковые системы могут более эффективно индексировать страницы, так как они получают полностью рендеренный HTML-код. ✅SSR обеспечивает лучшую видимость для поисковых роботов, что важно для сайтов, ориентированных на SEO. 2️⃣Быстрое время до первого отрисовки (First Paint): ✅Пользователи быстрее видят начальное содержимое страницы, так как браузер получает готовый HTML. ✅Это может улучшить восприятие производительности и снизить показатель отказов. 3️⃣Социальные сети и предварительный просмотр: ✅SSR упрощает создание мета-тегов и содержимого для социальных сетей, что позволяет правильно отображать предварительный просмотр страниц при их шаринге. 4️⃣Лучший пользовательский опыт на медленных устройствах: ✅Так как большая часть вычислений выполняется на сервере, клиентские устройства с низкой производительностью быстрее отображают контент. Недостатки 1️⃣Увеличение нагрузки на сервер: ✅Сервер должен обрабатывать и рендерить каждую страницу, что может требовать больше ресурсов по сравнению с CSR. ✅Это может потребовать более мощного серверного оборудования или масштабирования для обработки большого трафика. 2️⃣Увеличение времени отклика сервера: ✅Рендеринг страниц на сервере может занять дополнительное время, особенно для сложных страниц с большим количеством данных. ✅Это может привести к увеличению времени ответа сервера. 3️⃣Сложность настройки и поддержки: ✅Настройка SSR требует дополнительных знаний и усилий по сравнению с CSR. ✅Поддержка и отладка SSR-приложений может быть более сложной из-за необходимости управлять состоянием на сервере и клиенте. 4️⃣Гибридные решения могут быть сложными: ✅Комбинирование SSR с CSR для достижения оптимальной производительности и функциональности (например, использованием технологии Hydration) может усложнить архитектуру приложения. Когда его использовать 1️⃣Контент, зависящий от SEO: ✅Блоги, новостные сайты, интернет-магазины и другие ресурсы, для которых важно быстрое и эффективное индексирование поисковыми системами. 2️⃣Быстрая первая отрисовка (First Paint): ✅Приложения, где важно быстрое отображение контента для улучшения пользовательского опыта и снижения показателя отказов. 3️⃣Социальные приложения: ✅Сайты, которые активно шарятся в социальных сетях и нуждаются в корректном отображении предварительных просмотров страниц. Примеры 1️⃣Next.js для React: ✅Популярный фреймворк, который облегчает создание SSR-приложений на основе React. ✅Поддерживает гибридные приложения с SSR для начальной загрузки и CSR для последующего взаимодействия. 2️⃣Nuxt.js для Vue.js: ✅Фреймворк, предоставляющий мощные возможности для SSR с использованием Vue.js. ✅Упрощает создание универсальных приложений с возможностью переключения между SSR и CSR. SSR рендерит страницы на сервере, улучшая SEO и скорость начальной загрузки, но увеличивает нагрузку на сервер и сложность настройки. Подходит для сайтов с критичным SEO и быстрым отображением контента, например, блоги и интернет-магазины. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Хочешь щёлкать задачи по фронтенду как орешки? Канал Frontend tests & tasks научит! Это не очередной канал с задачами. Здесь придется думать. Убедись сам 👉 @Frontend_tasks

Ваши товары станут заметнее в поиске Яндекса Яндекс Товары — сервис для аналитики и роста продаж интернет-магазинов. Подробнее ⚡ Попробовать #реклама merchants.yandex.ru О рекламодателе

Когда брать абсолютные величины а когда относительные ? Спросят с вероятностью 7% Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы. Абсолютные величины (например, px, pt, cm, in) Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста. Когда использовать: 1️⃣Пиксели (`px`): ✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне. ✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки). ✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

Относительные величины (например, %, em, rem, vw, vh) Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты. Когда использовать: 1️⃣Проценты (`%`): ✅Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента. ✅Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

2️⃣Эм (`em`): ✅Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя. ✅Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

3️⃣Рем (`rem`): ✅Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование. ✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

4️⃣Вьюпорт (`vw`, `vh`): ✅Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера). ✅Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

Комбинированное использование Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

Абсолютные величины (px) используются для точных размеров и фиксированных элементов. Относительные величины (%, em, rem, vw, vh) подходят для адаптивных макетов и элементов, которые должны изменяться в зависимости от размеров родителя или вьюпорта. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Регистрируйтесь на главную конференцию Yandex Cloud! Большая конференция Yandex Cloud для тех, кто создаёт цифровые продукты и решения. Вас ждут 5 тематических треков, 31 доклад, 50 экспертов, нетворкинг и общение. Участие бесплатное! Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

Какие знаешь и использовал способы оптимизации ? Спросят с вероятностью 7% Оптимизация веб-приложений — это комплекс мероприятий, направленных на улучшение производительности и пользовательского опыта. Рассмотрим основные способы оптимизации, которые можно использовать на различных этапах разработки фронтенда. 1️⃣Оптимизация производительности загрузки 1️⃣.1️⃣Минификация и сжатие ✅Минификация: Удаление лишних пробелов, комментариев и сокращение имен переменных в JavaScript, CSS и HTML. ✅Инструменты: Terser (для JavaScript), cssnano (для CSS), HTMLMinifier (для HTML). ✅Сжатие: Использование gzip или Brotli для сжатия файлов перед отправкой их клиенту. ✅Инструменты: Поддержка встроена в большинство серверов (NGINX, Apache) и CDN. 1️⃣.2️⃣Бандлинг и код-сплиттинг ✅Бандлинг: Объединение множества файлов в один, чтобы уменьшить количество HTTP-запросов. ✅Инструменты: Webpack, Rollup, Parcel. ✅Код-сплиттинг: Разделение кода на более мелкие части, которые загружаются по мере необходимости. ✅Инструменты: Webpack Dynamic Imports, React.lazy, Vue Router lazy loading. 1️⃣.3️⃣Оптимизация изображений ✅Сжатие изображений: Уменьшение размера изображений без значительной потери качества. ✅Инструменты: ImageOptim, TinyPNG, Squoosh. ✅Использование современных форматов: WebP, AVIF. ✅Инструменты: Convertio, встроенные конвертеры в редакторах изображений. 1️⃣.4️⃣Lazy Loading ✅Отложенная загрузка: Загрузка изображений и других ресурсов только по мере их необходимости (например, когда они попадают в видимую область). ✅Инструменты: Intersection Observer API, loading="lazy" для изображений. 2️⃣Оптимизация производительности рендеринга 2️⃣.1️⃣ Виртуальный скроллинг ✅Использование виртуальных списков: Отрисовка только видимых элементов списка, что снижает нагрузку на рендеринг. ✅Инструменты: react-window, react-virtualized, Vue Virtual Scroll List. 2️⃣.2️⃣Избегание ненужных перерисовок ✅Мемоизация: Использование React.memo и useMemo для предотвращения ненужных перерисовок в React. ✅Инструменты: React.memo, useMemo, PureComponent. 2️⃣.3️⃣Оптимизация CSS ✅Удаление неиспользуемого CSS: Использование инструментов для удаления неиспользуемых стилей. ✅Инструменты: PurgeCSS, UnCSS. ✅Использование CSS-сеток: Применение Flexbox и CSS Grid для оптимизации макетов. ✅Инструменты: CSS Grid, Flexbox. 3️⃣Улучшение пользовательского опыта (UX) 3️⃣.1️⃣Оптимизация времени до интерактивности (Time to Interactive) ✅Preloading: Предварительная загрузка критических ресурсов. ✅Инструменты: <link rel="preload">, <link rel="prefetch">. Critical CSS: Встраивание критических CSS в head для ускорения отображения начального контента. ✅Инструменты: critters, critical. 3️⃣.2️⃣ Progressive Web App (PWA) ✅Кэширование и оффлайн-работа: Использование Service Workers для кэширования ресурсов и обеспечения оффлайн-работы. ✅Инструменты: Workbox, встроенные API браузеров. 4️⃣Улучшение производительности JavaScript 4️⃣.1️⃣Оптимизация использования памяти ✅Избегание утечек памяти: Использование правильных паттернов для управления памятью и очистки ненужных объектов. ✅Инструменты: DevTools профилировщики, ESLint плагины для анализа кода. 4️⃣.2️⃣ Асинхронные операции ✅Использование асинхронного кода: Применение async/await, Promises для работы с асинхронными операциями. ✅Инструменты: API браузеров, библиотеки (например, Axios). Для оптимизации веб-приложений используются методы минимизации и сжатия ресурсов, бандлинг и код-сплиттинг, оптимизация изображений и CSS, lazy loading, виртуальный скроллинг, оптимизация JavaScript и данных, а также улучшение времени до интерактивности и внедрение PWA. Эти подходы помогают улучшить производительность и пользовательский опыт. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

💸 Вакансии для IT'шников Выбери своё направление ⤵ 1. Frontend 2. Python 3. Java 4. Тестировщик QA 5. Data Science 6. DevOps 7. C# 8. С/C++ 9. Golang 10. PHP 11. Kotlin 12. Swift

📌 Где писать запросы к серверу? 💬 Спрашивают в 3% собеседований Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. Вот основные места, где это обычно делается, и примеры для каждого из них: 1️⃣ Компоненты Запросы к серверу часто выполняются непосредственно в компонентах. Для этого можно использовать хуки или методы жизненного цикла классовых компонентов. 🤔 Использование хуков useEffect: useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🤔 Методы жизненного цикла в классовых компонентах componentDidMount: Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

2️⃣ Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js:

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js:

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

3️⃣ Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. 🤔 Заключение Запросы к серверу можно писать в различных частях вашего кода в зависимости от архитектуры приложения и используемых технологий. Важно, чтобы запросы выполнялись в логически обоснованных местах, а их логика была хорошо инкапсулирована и легко тестируема. 🤔 Краткое объяснение Запросы к серверу пишут в коде клиента или сервера, в зависимости от архитектуры приложения. Важно делать это в логически обоснованных местах и обрабатывать возможные ошибки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

📌 Зачем нужен ref? 💬 Спрашивают в 3% собеседований В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🤔 Основные случаи использования `ref`: ➕ Доступ к DOM-элементам: ➕ Использование в сторонних библиотеках: ➕ Сохранение состояния вне дерева компонентов: 🤔 Примеры использования `ref`: 1️⃣ Доступ к DOM-элементам Установка фокуса на элемент:

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

2️⃣ Получение размеров элемента Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

3️⃣ Использование в классовых компонентах Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🤔 Важно помнить ➕ Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. ➕ Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. ➕ Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. 🤔 Заключение ref в React предоставляет способ прямого доступа к DOM-элементам или компонентам. Он полезен для манипуляции с элементами, интеграции со сторонними библиотеками и сохранения информации вне состояния компонента. Тем не менее, ref следует использовать с осторожностью, чтобы не нарушить декларативный подход React. Коротко: ref в React используется для доступа к DOM-элементам или компонентам напрямую, что позволяет выполнять операции, которые не могут быть выполнены через декларативный подход React. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых