React Frontend Developer

Question 1

Как использовать keys?

Accepted Answer

Keys — это уникальные идентификаторы, которые React использует для того, чтобы отслеживать элементы при рендеринге списков. Они помогают React эффективно обновлять только те элементы, которые изменились, а не перерендеривать весь список. Ключи должны быть уникальными среди соседних элементов.

Question 2

Что такое keyframes и как можно использовать?

Accepted Answer

Keyframes — это правило в CSS, которое определяет промежуточные состояния анимации. Оно позволяет указать, как элемент должен выглядеть на разных этапах анимации. Используя директиву @keyframes, можно задавать стили в определённые моменты времени. Затем анимация применяется к элементу через свойство animation, где указывается название ключевых кадров и другие параметры, такие как продолжительность и тайминг.

Question 3

Можно ли рандомные key в React задать?

Accepted Answer

Да, но так делать не стоит.React позволяет использовать случайные key (например, Math.random() или crypto.randomUUID()), но это приводит к:Потере производительности (React не сможет правильно сравнивать элементы).Ошибкам в работе компонентов (например, неожиданный ререндер полей формы).Лучше использовать стабильные уникальные значения (ID из данных, хеши, индексы — с осторожностью).

Question 4

Что произойдет с дочерним компонентом, если поменяется key у родительского компонента?

Accepted Answer

При изменении key у родительского компонента React интерпретирует это как то, что это совершенно новый компонент. Старый экземпляр компонента и все его дочерние элементы будут полностью размонтированы (вызовутся функции очистки в useEffect), а затем будет смонтирован совершенно новый экземпляр с чистым состоянием. Это мощный инструмент для принудительного сброса состояния компонента.

Question 5

Для чего нужен оператор keyof и typeof в ts? Что выведет keyof от typeof?

Accepted Answer

typeof в TypeScript (в контексте типов) используется для получения типа переменной или константы. keyof используется для получения типа, представляющего все ключи (имена свойств) другого типа. Комбинация keyof typeof сначала получает тип значения с помощью typeof, а затем извлекает тип его ключей с помощью keyof. Это позволяет создать union-тип из имен свойств объекта, определенного как константа.

Question 6

Что такое key в React и зачем он нужен

Accepted Answer

Key - это специальный строковый атрибут в React, который помогает идентифицировать элементы в списке. Когда React обновляет список, он использует ключи для определения, какие элементы были изменены, добавлены или удалены. Это позволяет React эффективно перерисовывать только измененные элементы, вместо полного обновления всего списка. Без ключей React может неправильно определить изменения, что приведет к ошибкам в отображении и снижению производительности.

Question 7

Почему key важны при работе со списками?

Accepted Answer

key позволяет React однозначно идентифицировать элементы списка. Благодаря этому React понимает, какие элементы были добавлены, удалены или перемещены. Без key React ориентируется на индекс, что может приводить к ошибкам. Корректные ключи помогают сохранить состояние компонентов. Это важно для производительности и корректности интерфейса.

Question 8

Можно ли использовать key для принудительного перемонтирования компонента?

Accepted Answer

Да, изменение key приводит к полному перемонтированию компонента. React воспринимает элемент с новым key как совершенно новый. В результате старый компонент размонтируется, а новый создаётся с нуля. Это приводит к сбросу состояния и эффектов. Такой приём используется осознанно и точечно.

Question 9

Как типизировать функцию, которая получает значение объекта по ключу?

Accepted Answer

Функцию типизируют с помощью generic-параметров и keyof. Ключ ограничивается ключами объекта, а тип возвращаемого значения зависит от переданного ключа. Это позволяет TypeScript точно вывести тип и предотвратить доступ к несуществующим свойствам. Такой подход делает код безопасным и самодокументируемым.

Question 10

Как ограничить generic ключами объекта (keyof)?

Accepted Answer

Generic ограничивают ключами объекта с помощью конструкции K extends keyof T. Это гарантирует, что K может быть только одним из ключей объекта T. Такой подход позволяет связать тип ключа с типом возвращаемого значения и получить точную типизацию. Это базовый и самый распространённый паттерн в TypeScript.

Вопросы React Frontend Developer