Advance

Question 1

Что такое сверка (reconciliation)?

Answer 1

Это алгоритм React, используемый для того, чтобы отличить одно дерево элементов от другого для определения частей, которые нужно будет заменить

Question 2

Какие эвристики используются в React при сверке деревьев?

Answer 2

1. Два разных типа элементов (div, a, …) порождают разные деревья
2. Разработчик может подсказать какие зависимые элементы не нуждаются в перерисовке при помощи пропса key

Такие эвристики позволяют проводить O(n) операций сравнения для n элементов в дереве.

Question 3

Как React отрабатывает при изменении типа корневого элемента?

Пример: span -> div

Answer 3

Если тип корневого узла изменился, реакт удаляет всё нижележащее дерево и создаёт его заново для нового типа. Состояния, хранившиеся в старом дереве, удаляются.

Question 4

Зачем нужен пропс key?

Answer 4

Ключи нужны для того чтобы реакт различал и лишний раз не обновлял зависимые элементы если их много.

Ключи также делают изменение порядка элементов или вставку новых элементов гораздо более дешёвыми.

Question 5

Какие проблемы может вызвать использование порядковых индексов в качестве ключей?

Answer 5

Порядок данных в исходном массиве может поменяться, но реакт об этом ничего не узнает, и запишет данные по старым индексам-ключам.

В результате, данные могут смещаться в соседние элементы при вставке/удалении или изменении порядка данных в массив.

Question 6

Что такое virtual DOM?

Answer 6

Это концепция в которой идеальное (виртуальное) представление UI всегда хранится в памяти и синхронизируется с настоящей DOM с помощью библиотеки (такой как ReactDOM).

Question 7

Что такое virtual DOM? Как он реализован в реакте (в общих чертах)? Что он даёт?

Answer 7

Это концепция в которой идеальное (виртуальное) представление UI всегда хранится в памяти и синхронизируется с настоящей DOM с помощью библиотеки (такой как ReactDOM).

В реакте, виртуальный дом - это объекты элементов. Реакт также хранит дополнительную информацию о дереве объектов в специальных объектах - fibers.

Виртуальный DOM создаёт абстракцию над управлением атрибутами и ручным управлением DOM’ом. Он обеспечивает декларативность API реакта, позволяя описывать желаемые состояния UI.

Question 8

Что такое чистый компонент (pureComponent)?

Как создать чистый функциональный компонент?

Answer 8

Чистый компонент поверхностно сравнивает новые пропсы с предыдущими, и при отсутствии изменений не запускает render, а переиспользует результат предыдущего рендера.

Чистый функциональный компонент можно создать используя HOC React.memo(component, equalityCheck)