[React] > Basic (Часть 2)

Question 1

[Функциональный React]
Для чего нужен хук useState?

Answer 1

useState нужен для хранения состояния

($) если нужно обьединять состояния обьектов то лучше юзать useReducer

Question 2

[Функциональный React]
Расскажите о хуке useEffect

Answer 2

Хук useEffect принимает функцию которая реализует мутации, подписки, таймеры. Выполняется после каждого рендера. Вызывается при изминение данных которые мы передаем вторым аргументом

($) useEffect - это комбо из componentDidMount, componentDidUpdate и componentWillUnmount.

Question 3

[Функциональный React]
Для чего нужен хук useContext?

Answer 3

useContext нужен для пробрасывания глобальных данных, таких как тема, юзер инфо, язык

Question 4

[Функциональный React]
Для чего нужен хук useReducer?

Answer 4

useReducer нужен для хранения сложных обьектов или мы зависим от предедущего стейта, также имеет лучшую производительность по глубокому обновлению

($) dispatch стабильна, изза чего ее не обьязательно включать в зависимости хуков useEffect и useCallback

Question 5

[Функциональный React]
Для чего нужен хук useCallback?

Answer 5

useCallback нужен для меморизации функции

($) полезно если передаем колбэк как пропс

Question 6

[Функциональный React]
Для чего нужен хук useMemo?

Answer 6

useMemo нжуен для меморизации значения

($) повышает производительность, меньше просчетов

Question 7

[Функциональный React]
Для чего нужен хук useRef?

Answer 7

useRef нужен для доступа к DOM елементу

Question 8

Что такое порталы в React?

Answer 8

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

Первый аргумент (child) — это любой React-компонент, который может быть отрендерен, такой как элемент, строка или фрагмент. Следующий аргумент (container) — это DOM-элемент.

Типовой случай применения порталов — когда в родительском компоненте заданы стили overflow: hidden или z-index, но вам нужно чтобы дочерний элемент визуально выходил за рамки своего контейнера. Например, диалоги, всплывающие карточки и всплывающие подсказки.

Question 9

Что такое React Reconciliation (Cверка) и как он работает?

Answer 9

React Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.

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

При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.

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

($)
сравнивает ссылки обьектов, а не сами обьекты (иначе было бы дорого по вычислениям)

Question 10

[Функциональный React]
Что такое React.memo

Answer 10

React.memo — это HOC не позволяющий ререндерить дочерний компонент при одних и тех же значениях пропсов

Question 11

[Функциональный React]
Расскажите о хуке UseLayoutEffect

Answer 11

Хук работает как useEffect, но запускается после всех изменений DOM.
Полезен для чтения макета DOMа и синхронного повторного рендеринга (???).

($)
При SSR не стоит юзать UseLayoutEffect так как нужно дождаться загрузку джаваскрипта