Explication détaillée sur l'ajout et la suppression d'événements onScroll dans React.Js

React est une bibliothèque de composants JS développée par Facebook pour créer des interfaces frontales. En raison de sa solide expérience, cette bibliothèque n'a aucun problème de développement technique. Cet article vous présente principalement les informations pertinentes sur l'ajout et la suppression d'événements onScroll dans React.Js. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. ci-dessous. Venez apprendre ensemble.

Avantages de React

• Résoudre le problème selon lequel les données ne cessent de changer et deviennent difficiles à exploiter dans le développement de projets à grande échelle

• développement orienté composants, rendant le développement plus rapide

• Flux de données unidirectionnel, utile pour trouver des problèmes

• DOM virtuel, il y a un ensemble à l'intérieur de React L'algorithme diff peut calculer rapidement la position globale qui doit être modifiée, afin d'obtenir un rafraîchissement partiel rapide, par exemple : supprimer une liste et insérer un nouveau tableau Après le calcul, les différences seront comparées et ; puis inséré ;

Préface

Tout le monde peut rencontrer un tel problème, c'est-à-dire le défilement des événements. Par rapport à l'obtention de l'événement scroll de p, si vous souhaitez ajouter un événement scroll à p dans ReactJS, il est fondamentalement impossible de l'ajouter (peut-être parce que ma capacité est limitée, de toute façon, jusqu'à présent, je n'ai pas trouvé de moyen de directement ajouter un événement de défilement à l'événement p).

Pour réaliser le défilement, vous devez enregistrer l'événement scroll dans composantWillMount, window.addEventListener('scroll', this.onScroll.bind(this)).

Supprimez window.removeEventListener('scroll', this.onScroll.bind(this)) dans composantWillUnmount.

Il est facile à ajouter mais difficile à supprimer. La suppression ci-dessus ne peut pas être supprimée. Dans d'autres pages, si vous faites défiler, l'événement dans onScroll sera déclenché. À ce moment, une erreur sera signalée, indiquant que le composant a été désinstallé et ne peut pas être utilisé. Vérifiez le code, etc.

Je pensais avoir dû le rencontrer et trouver une solution. J'ai trouvé un article sur la façon de supprimer le défilement.

Le code est le suivant :

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=''
}

Recommandations associées :

L'événement onscroll

Explication détaillée de la limitation des fonctions en JavaScript qui déclenche l'événement onScroll

À propos de la description du bug de l'événement onScroll se déclenchant trois fois par défilement dans IE6_javascript compétences

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!