React Frontend Developer

Question 1

Что делают метатеги , , ?

Accepted Answer

Метатеги — это элементы HTML, которые предоставляют информацию о странице браузеру и поисковым системам. Например, задает кодировку символов, что важно для корректного отображения текста. используется для управления отображением страницы на мобильных устройствах, позволяя адаптировать содержимое под размеры экрана. Метатеги, такие как , могут задавать параметры, связанные с заголовками HTTP, что также способствует оптимизации страницы.

Question 2

Как использовать атрибут srcset с тегом <img>?

Accepted Answer

Атрибут srcset у тега <img> позволяет задать несколько версий изображения с разными разрешениями или размерами. Браузер автоматически выбирает наиболее подходящую версию в зависимости от плотности пикселей экрана и ширины экрана. В комбинации с атрибутом loading="lazy" можно использовать ленивую загрузку изображений для оптимизации производительности страницы.

Question 3

Set. В чем особенность? Какие свойства и методы есть? Как перебрать?

Accepted Answer

Set — это коллекция уникальных значений, которая автоматически удаляет дубликаты. Каждый элемент в Set хранится только один раз, независимо от того, сколько раз он был добавлен. Set имеет методы для добавления, удаления и проверки значений, такие как add(), delete(), has() и clear(). Перебирать элементы в Set можно с помощью метода forEach() или цикла for...of.

Question 4

WeakSet. В чем особенность? Какие свойства и методы есть? Как перебрать?

Accepted Answer

WeakSet — это коллекция уникальных объектов, где каждый объект хранится с использованием слабой ссылки. Главная особенность WeakSet заключается в том, что он не удерживает ссылки на свои элементы, что позволяет сборщику мусора автоматически удалять объекты, если на них больше нет ссылок. Методы WeakSet включают add(), delete() и has(), однако его нельзя перебрать, так как WeakSet не предоставляет итераторов.

Question 5

Что такое setTimeout и setInterval?

Accepted Answer

setTimeout выполняет указанную функцию один раз через заданное время, а setInterval — периодически, с указанным интервалом. Оба метода работают асинхронно, что значит, что они не блокируют основной поток выполнения программы. Чтобы остановить выполнение setInterval, нужно вызвать clearInterval, а для остановки отложенного вызова setTimeout — clearTimeout.

Question 6

Объясните разницу между последовательным и параллельным выполнением асинхронных функций. Как работают Promise.all() и Promise.allSettled()?

Accepted Answer

Последовательное выполнение асинхронных функций означает, что каждая следующая функция начинается только после завершения предыдущей, тогда как параллельное выполнение позволяет нескольким функциям выполняться одновременно.

Метод Promise.all() запускает несколько промисов параллельно и возвращает результат, когда все они успешно завершатся, а Promise.allSettled() возвращает результат независимо от того, завершился ли каждый промис успехом или ошибкой.

Question 7

Можете привести пример counter-increment и counter-reset в CSS для создания автоматической нумерации на веб-странице?

Accepted Answer

Эти свойства позволяют динамически увеличивать счетчики для элементов, таких как заголовки, списки и другие элементы, что делает нумерацию более гибкой и управляемой.

С помощью counter-reset мы создаем новый счетчик, а counter-increment увеличиваем его значение для определенных элементов. Например, мы можем использовать эти свойства для автоматической нумерации заголовков на странице. Счетчик может быть сброшен при помощи counter-reset, а при каждом появлении элемента с counter-increment счетчик будет увеличиваться.

Question 8

Что такое команды git reset --mixed и git merge --abort?

Accepted Answer

git reset --mixed: отменяет изменения, которые были добавлены в индекс, но сохраняет изменения в рабочем каталоге.git merge --abort: отменяет слияние, которое в данный момент находится в процессе, и возвращает репозиторий в состояние до начала слияния.

Question 9

Как написать React-компонент, чтобы при монтировании запускался setInterval, выводящий в консоль "Hello world" каждые 10 секунд? Что важно учесть при такой реализации с setInterval?

Accepted Answer

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Hello world');
  }, 10000);
  return () => clearInterval(intervalId); // Очистка при размонтировании
}, []);Важно:Очистка в return — иначе интервал будет работать после удаления компонента.Пустой массив зависимостей [] — чтобы эффект выполнился только при монтировании.

Question 10

Как объединить обновление состояния для нескольких setState?

Accepted Answer

React группирует несколько вызовов setState, происходящих в одном синхронном событии, в одно обновление, чтобы избежать лишних перерендеров. Это поведение называется батчинг, и оно работает по умолчанию в обработчиках событий React, но в асинхронном коде раньше требовалось вручную вызывать flushSync или unstable_batchedUpdates.

Вопросы React Frontend Developer