React Frontend Developer

Question 1

Reselect для чего?

Accepted Answer

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

Question 2

Как использовать createSelector из reselect с RTK?

Accepted Answer

createSelector из библиотеки reselect позволяет создавать мемоизированные селекторы, которые эффективно извлекают и вычисляют данные из состояния Redux. С RTK он используется для создания производительных селекторов, которые избегают ненужных перерасчетов, если данные не изменились.

Question 3

Что такое мемоизация и как она используется в Redux с помощью reselect?

Accepted Answer

Мемоизация — это техника оптимизации, при которой результаты функции сохраняются и используются повторно, если входные данные не изменились. В Redux мемоизация используется с помощью библиотеки reselect, которая позволяет кэшировать результаты селекторов и избежать их повторных вычислений. Это особенно полезно при работе с большими наборами данных, где вычисления могут быть дорогими.

Question 4

Как querySelector со звёздочкой позволяет получить все элементы страницы?

Accepted Answer

Метод querySelector('*') возвращает первый элемент, соответствующий селектору '*', то есть любой элемент. Чтобы получить все элементы, нужно использовать querySelectorAll('*'), который возвращает NodeList со всеми элементами страницы. Это полезно для перебора или анализа всего DOM.

Question 5

Какие существуют методы поиска элементов в DOM — querySelector, getElementBy*? Чем они отличаются?

Accepted Answer

Основные методы поиска элементов в DOM: getElementById (по id), getElementsByClassName (по классу), getElementsByTagName (по тегу) и querySelector/querySelectorAll (по CSS-селектору). Первые три возвращают живые коллекции (HTMLCollection), а querySelectorAll — статический NodeList. querySelector возвращает первый подходящий элемент, а querySelectorAll — все.

Question 6

Почему использование var и поиск элементов по индексу (querySelectorAll()[0]) является плохой практикой?

Accepted Answer

Использование var приводит к проблемам с областью видимости и всплытием переменных, что может вызывать трудноуловимые баги. Обращение к элементам по индексу через querySelectorAll()[0] ненадёжно, так как при изменении структуры HTML код сломается. Вместо var используйте let или const, а для доступа к элементам применяйте querySelector или уникальные идентификаторы.

Question 7

Какой элемент управления лучше использовать для выбора числового значения из большого диапазона: select с множеством пунктов или range+input? Почему?

Accepted Answer

Для выбора числового значения из большого диапазона лучше использовать input type="range" (ползунок) с дополнительным числовым полем. Select с множеством пунктов неудобен при большом количестве опций, так как требует прокрутки и усложняет поиск. Range обеспечивает быстрый визуальный выбор, а числовое поле — точное значение.

Question 8

Как реализовать форму, в которой в зависимости от выбранного значения в Select добавляются или изменяются другие input-поля?

Accepted Answer

В React для реализации такой формы используется управляемый компонент: значение select хранится в состоянии, и на его основе условно рендерятся дополнительные поля. При изменении select обновляется состояние, что вызывает перерисовку с нужными полями. Это позволяет гибко менять структуру формы без прямого манипулирования DOM.

Question 9

Как реализовать функционал множественного выбора в select?

Accepted Answer

Для реализации множественного выбора в select используется атрибут multiple. Он позволяет пользователю выбирать несколько вариантов, удерживая Ctrl (Cmd на Mac). Для отправки выбранных значений на сервер, name атрибуту добавляют квадратные скобки, например name="colors[]".

Question 10

При реализации компонентов вроде date picker, сложных таблиц, select — используете готовые библиотеки или пишете самостоятельно?

Accepted Answer

Выбор зависит от сложности компонента и требований проекта. Для стандартных решений (date picker, select) обычно использую готовые библиотеки, так как они экономят время и проверены сообществом. Для уникальных или сильно кастомизированных компонентов (сложные таблицы) пишу самостоятельно, чтобы обеспечить гибкость и производительность.

Вопросы React Frontend Developer