Как можно удалить элемент React элемента JQuery Document Click Listeners?

Question

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

Например;Меню пользовательского интерфейса материала, https://codesandbox.io/s/o9970jm69 Меню быстрого переключения, например, быстро и реагирует на ваши нажатия.Но для нашего веб-приложения из-за этих прослушивателей событий документа поведение переключателей отличается от демонстрационного.

Можно ли удалить эти прослушиватели щелчка документов для элементов React?

Или есть ли способ избавиться от этих слушателей для компонентов React?

Answer 1

Это должно быть временное решение (удалите его после завершения перезаписи), потому что оно довольно грязное, но вы можете просто запустить функцию jQuery off на вашем элементе React при монтировании.

Чтобы упростить использование (и удаление), вы также можете создать HOC, чтобы сделать это в одном месте, что-то вроде этого:

function withJqueryOffEvent(WrappedComponent, event) {
    return class extends React.Component {
        componentDidMount() {
            $(this.el).off(event);
        }

        render() {
            return <WrappedComponent ref={el => this.el = el} {...this.props} />;
        }
    };
}

// use it like any other HOC
withJqueryOffEvent(AnyComponent, 'click');

Здесь мы просто создаем базовый HOCкоторые принимают имя события, прикрепляют ref к обернутому компоненту в рендере и используют этот ref в селекторе jquery после монтирования, чтобы сделать off .

Answer 2

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

... не удается полностью удалить ненужные слушатели документов

, поскольку это не вариант, ваш второй лучший выбор - изменить слушателей так, чтобы они выходили раньше, если event.target является частью приложения реагирования (вы можете проверить это, выполнив document.getElementById('#your-react-dom-root').contains(event.listener))

Answer 3

Существует много документов о прослушивателях событий щелчка

Вы должны иметь в виду «На всей странице много разных компонентов, на которых есть слушатели».

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

Answer 4

Решение № 1 для событий jQuery

Вы можете использовать unbind для удаления событий.Если вам нужно знать имя или тип события, вы можете увидеть в Chrome Dev Tools

Решение # 2 события Javascript

Другой метод - захват события и остановить распространение .Вы можете использовать removeEventListener или установить значение свойства null .