React Frontend Developer

Question 1

Можете объяснить концепцию Virtual DOM в React?

Accepted Answer

Virtual DOM — это абстракция реального DOM, которая используется React для улучшения производительности. Вместо того чтобы обновлять реальный DOM напрямую при каждом изменении состояния, React сначала обновляет виртуальный DOM, а затем сравнивает его с предыдущей версией, чтобы минимизировать количество операций с реальным DOM. Этот процесс называется дифференциацией (reconciliation).Пример:React обновляет виртуальный DOM.Он сравнивает его с предыдущим состоянием.Изменяет только те части реального DOM, которые изменились.

Question 2

Как работать с react-window и react-virtualized?

Accepted Answer

react-window и react-virtualized — это библиотеки для виртуализации длинных списков в React, позволяющие рендерить только видимые элементы, что значительно улучшает производительность. React-window проще и легче, чем react-virtualized, и подходит для большинства случаев. Для использования вам нужно создать виртуализированный список, передав в него массив данных и настроив высоту элементов.

Question 3

Как работает virtual table dispatch?

Accepted Answer

Virtual table dispatch — это способ вызова методов у классов через специальную таблицу виртуальных методов. Когда метод вызывается, программа не знает его точную реализацию заранее и ищет её в таблице по индексу. Это позволяет корректно вызывать переопределённые методы у подклассов. Такой механизм используется для поддержки наследования и полиморфизма. Вызов происходит немного медленнее, чем прямой вызов функции, но даёт гибкость.

Question 4

В чем разница между static, virtual table и witness table диспетчеризацией?

Accepted Answer

В Swift есть несколько способов вызова методов. Static dispatch выполняется во время компиляции и самый быстрый. Virtual table dispatch используется для классов и поддерживает полиморфизм. Witness table dispatch применяется при работе с протоколами. Разные виды диспетчеризации нужны для разных задач и имеют разную стоимость.

Question 5

Что такое virtual threads и в чём их идея?

Accepted Answer

Virtual threads — это лёгкие потоки, управляемые JVM, а не операционной системой. Они позволяют создавать миллионы потоков без серьёзных накладных расходов. Идея заключается в том, чтобы упростить конкурентный код, сохранив привычную модель потоков. Virtual threads особенно эффективны для задач с большим количеством блокирующих операций. Они появились в рамках Project Loom.

Question 6

Как Virtual DOM взаимодействует с реальным DOM?

Accepted Answer

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

Question 7

По каким критериям React сравнивает элементы Virtual DOM?

Accepted Answer

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

Question 8

Почему React требует одного корневого элемента?

Accepted Answer

React требует один корневой элемент, потому что каждый компонент должен возвращать одно дерево элементов. Это упрощает построение Virtual DOM и процесс сравнения изменений. Один корень делает структуру компонента предсказуемой. При необходимости можно использовать Fragment. Это ограничение связано с внутренней архитектурой React.

Question 9

Почему не рекомендуется использовать index как key?

Accepted Answer

Использование index как key приводит к неправильному сопоставлению элементов при изменении массива. При добавлении, удалении или сортировке элементов Vue считает, что элементы просто «переехали». Это может ломать состояние компонентов, input-поля и анимации. Ошибки появляются не сразу, а при изменениях данных. Поэтому index допустим только для статичных списков.

Вопросы React Frontend Developer