Ausführliche Erklärung zum Hinzufügen und Löschen von onScroll-Ereignissen in React.Js

React ist eine von Facebook entwickelte JS-Komponentenbibliothek zum Erstellen von Front-End-Schnittstellen. Aufgrund ihres starken Hintergrunds weist diese Bibliothek keine Probleme bei der technischen Entwicklung auf. Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Hinzufügen und Löschen von OnScroll-Ereignissen in React.Js ein. Der Artikel stellt es ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert für alle, die es beim Lernen oder Arbeiten benötigen Kommen Sie und lernen Sie gemeinsam.

Vorteile von React

• Lösen Sie das Problem, dass sich Daten ständig ändern und bei der Entwicklung großer Projekte schwierig zu handhaben sind; 🎜> Komponentenorientierte Entwicklung, die die Entwicklung beschleunigt;

• Einseitiger Datenfluss, der beim Auffinden von Problemen hilfreich ist; Es gibt einen Satz in React. Der Diff-Algorithmus kann schnell die Gesamtposition berechnen, die geändert werden muss, um beispielsweise eine schnelle Teilaktualisierung zu erreichen: Nach der Berechnung werden die Unterschiede verglichen dann eingefügt;

• Vorwort

Jeder kann auf ein solches Problem stoßen, nämlich das Scrollen von Ereignissen. Im Vergleich zum Abrufen des Scroll-Ereignisses von p ist es im Grunde unmöglich, ein Scroll-Ereignis zu p in ReactJS hinzuzufügen, wenn Sie es in ReactJS hinzufügen möchten (vielleicht weil meine Fähigkeiten begrenzt sind, aber bisher habe ich keinen Weg gefunden, dies direkt zu tun). Scroll-Ereignis zu p hinzufügen).

• Um das Scrollen zu erreichen, müssen Sie das Scroll-Ereignis in ComponentWillMount registrieren, window.addEventListener(‘scroll’, this.onScroll.bind(this)). Das Hinzufügen von Ereignissen ist sehr einfach.

Entfernen Sie window.removeEventListener(‘scroll’, this.onScroll.bind(this)) in ComponentWillUnmount.

Es ist einfach hinzuzufügen, aber schwierig zu löschen. Das oben genannte Entfernen kann nicht gelöscht werden. Wenn Sie auf anderen Seiten scrollen, wird das Ereignis in onScroll ausgelöst. Zu diesem Zeitpunkt wird ein Fehler gemeldet, der besagt, dass die Komponente deinstalliert wurde und nicht ausgeführt werden kann.

Ich dachte, ich wäre darauf gestoßen und habe eine Lösung gefunden. Ich habe einen Artikel darüber gefunden, wie man Scroll entfernt.

Der Code lautet wie folgt:

Verwandte Empfehlungen:

Das Ereignis onscroll

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

Detaillierte Erläuterung der Funktionsdrosselung in JavaScript, die das onScroll-Ereignis auslöst

Über die Fehlerbeschreibung des onScroll-Ereignisses, das dreimal pro Scroll in IE6_javascript ausgelöst wird Fähigkeiten

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Hinzufügen und Löschen von onScroll-Ereignissen in React.Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!