Как, когда и почему мы очищаем наши компоненты в реакции JavaScript?

Question

Я понимаю, что нам нужно очистить наши компоненты в React, чтобы предотвратить утечки памяти (возможно, и по другим причинам). Я также понимаю, как использовать comonentWillUnmount (не использовать больше) и useEffect hook. Однако мой вопрос в том, что и почему (действительно, почему) мы очищаем наши компоненты. Я хотел бы получить подробный ответ, поскольку у меня возникли проблемы с пониманием этой концепции.

Answer 1

Обычно это вообще не нужно.

Для большинства компонентов простое изменение состояния без последующего рендеринга размонтирует их без беспорядка.

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

• Прослушиватели событий должны быть свободны (т. Е. Прослушивать onScroll из window, чтобы сделать что-то причудливое при прокрутке страницы)
• Отмена подписки на подписки данных, которые были открыты при создании экземпляра этого компонента. (т. е. прослушивание новых сообщений в чате в открытом веб-сокете)
• Отмена тайм-аута или интервала, который больше не нужен. (т.е. обновлять часы один раз в секунду)

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

Answer 2

Сделать большинство компонентов в качестве компонентов дампа. показать, что когда-либо данные, представленные в качестве реквизита. Сделайте родительские компоненты ответственными за выборку данных. Это сделает компоненты более простыми и удобочитаемыми. В противном случае ни одна из строк кода в компонентах не увеличится и станет менее читабельной. Менее читаемые компоненты трудно понять другим разработчикам, их трудно отладить. Сделайте отписку о размонтировании компонентов