Coding
Вопросы из собеседований React-разработчика
Что такое Virtual DOM? Для чего нужны хуки? Как работает Redux?
•
2 мин чтения
•Пётр Евсиков
#javascript#interview#react#redux
Вопрос:
Что такое Virtual DOM?
Ответ:
Это облегчённая копия реального DOM, хранящаяся в оперативной памяти.
React обновляет эту копию вместо непосредственного изменения реального DOM, чтобы не вызывать лишние «дорогие» операции (layout, painting, reflow) в браузере.
Когда все изменения внесены, React сравнивает старую и новую версии Virtual DOM (diffing) и точечно обновляет реальный DOM (reconciliation).
Вопрос:
Как происходит обновление DOM?
Ответ:
Два элемента с разными типами произведут разные деревья. При сравнении двух деревьев первым делом React сравнивает два корневых элемента.
Когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.
Если тип не меняется, обновляются лишь изменённые атрибуты и дочерние узлы.
При перестановке элементов в списке ключи (key) позволяют React понять, какие элементы сохранились, какие добавились и какие удалились.
Вопрос:
Шаги обновления (упрощённо)
Ответ:
Обновление Virtual DOM
React фиксирует изменения (например, вызов setState или useState).
Diffing
React сравнивает предыдущий Virtual DOM с новым, выявляя отличия.
Reconciliation
Только изменённые части реального DOM перерисовываются.
Обновления выполняются пакетно, а не после каждого небольшого изменения.
Вопрос:
Что такое React Fiber?
Ответ:
Это новый механизм согласования (reconciliation) в React 16, который переосмысливает процесс рендеринга и обновления.
Его основная цель — сделать рендеринг виртуального DOM инкрементным: разбивать его на небольшие «задачи», управлять приоритетами и повышать отзывчивость интерфейса даже при больших объёмах работы.
Вопрос:
Основные преимущества Fiber
Ответ:
- Задачи с более высоким приоритетом (анимации, пользовательские действия) не блокируются, а могут выполняться раньше.
- Прервать и возобновить рендер, чтобы избежать «заморозки» интерфейса.
- Fiber служит основой для Concurrent Mode, позволяя React работать асинхронно и адаптироваться под текущую загрузку.
Ссылки
https://www.youtube.com/watch?v=5TmLhsG02f8