Нужно ли отменять привязку всех слушателей событий на моих компонентах React в componentWillUnmount

Question

Я работаю в приложении React, в котором у меня есть несколько компонентов на разных маршрутах.Я использую шаблон onClick={this.handleClick} для привязки событий

<>
<ParentComp>
    <button onClick={this.handleClick}></button>
</ParentComp>
</>

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

Редактировать Обработчик события не вызывает anykind setTimeout или setInterval иличто-нибудь в этом роде.

Answer 1

Нет, React заботится об обработке событий.Также обратите внимание, что React DOM заботится об обработке DOM-рендеринга.Ваш <button /> JSX не будет создавать элемент кнопки каждый раз, когда компонент отображается.Он определяет узел button в виртуальном дереве React, который затем синхронизируется с реальным DOM.

Из-за этого React не устанавливает обработчики событий непосредственно в узле, например, если вы проверяете <button> элемент с отладчиком, вы не увидите onClick слушателя, прикрепленного к нему!В чем дело?Эта статья объясняет это: https://medium.com/the-guild/getting-to-know-react-doms-event-handling-system-inside-out-378c44d2a5d0

TL; DR: React использует глобальный обработчик событий в корне вашей страницы, затем он заботится об отправке события, поэтому даже если вы получите ссылку buttonи затем вы используете removeEventListener, это не будет иметь никакого эффекта.

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

Answer 2

Нет.С помощью синтаксиса реакции позаботится о добавлении и удалении слушателя при необходимости.Вы должны беспокоиться об удалении обработчика, когда вы addEventListener самостоятельно.