React Frontend Developer

Question 1

Что такое ARIA (Accessible Rich Internet Applications), и как правильно использовать атрибуты ARIA для улучшения доступности?

Accepted Answer

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, который помогает разработчикам улучшать доступность сложных веб-приложений для людей с ограниченными возможностями. Атрибуты ARIA могут быть добавлены к HTML-элементам, чтобы описать их роли, состояния и свойства для экранных читалок и других вспомогательных технологий. Например, атрибуты ARIA могут помочь определить, что элемент является кнопкой или заголовком, и предоставить информацию о его состоянии (например, "раскрыто" или "закрыто"). Правильное использование ARIA делает контент более понятным и доступным для всех пользователей.

Question 2

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

Accepted Answer

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

Question 3

В чем разница между интерфейсом (interface) и типом (type) в TypeScript?

Accepted Answer

Интерфейсы и типы в TypeScript очень похожи, оба используются для описания структуры объектов, но у них есть различия. Интерфейсы лучше подходят для описания объектов и классов и могут расширяться (унаследовать) друг от друга. Типы более универсальны — они могут объединять примитивные типы, объединять (Union) или пересекать (Intersection) другие типы, но не могут быть расширены, как интерфейсы.

Question 4

Что такое пересечение типов (intersection types) в TypeScript, и как оно используется?

Accepted Answer

Пересечение типов в TypeScript позволяет объединить несколько типов в один, и результат будет включать все свойства всех типов. Это особенно полезно, когда нужно комбинировать разные типы данных или описывать объекты, которые должны иметь несколько наборов свойств одновременно. Пересечение создается с помощью оператора & и позволяет гибко создавать сложные структуры данных.

Question 5

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

Accepted Answer

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

Question 6

Как setInterval и setTimeout влияют на this?

Accepted Answer

В обычных функциях this внутри setInterval/setTimeout теряется (становится window/undefined в strict mode). Стрелочные функции сохраняют this из внешнего контекста.

Question 7

Отличие анимации при использовании requestAnimationFrame и SetInterval

Accepted Answer

setInterval выполняет функцию с фиксированной задержкой, не учитывая частоту обновления экрана, что может приводить к пропуску кадров и лишним вычислениям. requestAnimationFrame синхронизирует выполнение кода анимации с частотой обновления экрана (обычно 60 кадров/с), что делает анимацию плавной и эффективной. Он также автоматически останавливается, когда пользователь переходит на другую вкладку, экономя ресурсы. Для плавных анимаций всегда следует предпочитать requestAnimationFrame.

Question 8

Для чего используются Axios interceptors?

Accepted Answer

Axios interceptors позволяют перехватывать HTTP-запросы и ответы до их обработки. С их помощью можно изменять запросы, добавлять заголовки или обрабатывать ошибки. Interceptors работают централизованно и применяются ко всем запросам. Это упрощает поддержку и снижает дублирование кода. Они часто используются для авторизации и логирования.

Question 9

Какие задачи удобно решать с помощью interceptors?

Accepted Answer

Interceptors удобно использовать для задач, которые должны выполняться для всех HTTP-запросов. Это добавление access token, обработка ошибок и логирование. Они позволяют вынести повторяющуюся логику в одно место. Такой подход делает код чище и устойчивее.

Question 10

В каких случаях удобнее использовать interface, а в каких type?

Accepted Answer

interface удобнее использовать для описания объектов и публичных контрактов. type более универсален и подходит для объединений, примитивов и сложных типов. interface легко расширять, type — комбинировать. В большинстве случаев выбор зависит от задачи и стиля проекта. Оба инструмента часто используются вместе.

Вопросы React Frontend Developer