Хук useEffect в React 18 имеет своеобразное поведение.


Как мы все знаем, хук useEffect вызывается после рендеринга экрана. Если клиент заметит мутацию, возникнет эффект мерцания.
В качестве альтернативы мы можем эмулировать функцию жизненного цикла componentDidMount, используя хук useEffect и предоставляя код обратного вызова.

Итак, о каких изменениях мы будем говорить сейчас?

Когда компонент монтируется в режиме Strict, разработчики react изменили поведение useEffect.

Взгляните на режим Strict.

В React 16.3 строгий режим был добавлен в качестве инструмента для обнаружения паттернов кода, которые могут вызвать проблемы с (тогда еще экспериментальным) API одновременного рендеринга React.
Когда он применяется к компоненту React, такому как Fragment, нет никакого очевидного пользовательского интерфейса. Он вызывает дополнительные тесты и предупреждения для его потомков.

Поддерживается ли строгий режим в React?

Компонент React StrictMode можно рассматривать как вспомогательный компонент, который помогает разработчикам быстрее создавать код и предупреждает их о сомнительном коде, который был ошибочно добавлен в приложение.

Приложение React применяет дополнительное поведение ко всем компонентам, которые оно оборачивает вокруг себя (только в режиме DEV). Например, при выполнении в режиме «strictmode» React будет целенаправленно дважды рендерить компоненты, чтобы устранить любые опасные побочные эффекты.

В последней версии появилось несколько новых удивительных модификаций.

С появлением React 18 StrictMode приобретает дополнительную функцию для обеспечения совместимости с многоразовым состоянием. Когда режим StrictMode включен, React целенаправленно дважды вызывает эффекты для вновь смонтированных компонентов (mount -> unmount -> mount). React, как и другие поведения в строгом режиме, будет выполнять это только для TS разработки.

Какие изменения были внесены в useEffect?

Вам нужно будет изменить свой код теперь, когда useEffect вызывается дважды во время монтирования.
Никаких изменений не требуется, если useEffect имеет зависимые элементы. Если вы используете useEffect для эффекта при монтировании, вам нужно использовать хук useRef.
Например:

Если вы используете useEffect для очистки при размонтировании, все будет в порядке, если функция настройки включена в тот же useEffect.

Эффекты срабатывают дважды в строгом режиме React 18, что имитирует размонтирование и повторное монтирование компонента в режиме разработки. Каждый компонент монтируется, затем размонтируется и, наконец, монтируется заново.

React не просто так ввел многоразовое состояние.

Команда React работает над новой функцией offscreen, которая позволит нам использовать такие вещи, как контейнеры с вкладками и виртуализированные списки, а также использовать новые API браузеров, такие как content-visibility. Для этого компонент может быть присоединен и отсоединен несколько раз.

Отключение режима strictMode

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

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

Спасибо, что были со мной до сих пор! Давайте встречаться. Вы можете отметить мой профиль на Linkdin.

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

Оцените статью
Procodings.ru
Добавить комментарий