Je tente d'ajouter et de supprimer un auditeur d'événement dans un composant de réaction fonctionnel. L'auditeur est bien ajouté mais n'est pas supprimé lorsqu'il est demandé d'être. Je pense que la question est que la fonction que je me réfère J'ai essayé de déplacer Toutes les branches d'exécution sont frappés ici mais est là un moyen d'avoir une "méthode statique" dans un Composant fonctionnel? Est-ce que même le problème ici? Voici un lien vers le code Sandbox avec l'intégralité du code: HTTPS : //codesandbox.io/s/pzrwh manuellement est recréée chaque composant rendu. Ainsi, lorsque ReimenteventListener tente de le supprimer, ce n'est pas la même référence de fonction que lorsque AddiVentenlistener l'a ajouté. Handlemousemove '/ code> hors du composant, mais cela nécessitait l'accès aux crochets SetState générés dans le composant. document.removeeventlistener ("Mousemove", Handlemousemove) ne retirez pas l'écouteur d'événement.
3 Réponses :
Je pense que votre description de la question est sur place. Une solution rapide consiste à définir la variable handlemousemove à l'extérieur de votre fonction de , faisant essentiellement la variable statique et non recréé chaque rendu.
Ensuite, dans le corps de la fonction, attribuez uniquement la variable manuelle s'il est actuellement non attribuée et le remettez-le sur NULL lorsque vous définissez isfidowingmouse à false. < / p>
L'ancienne façon de le faire était avec Render accessoires , mais maintenant ce crochets sont arrivés C'est une meilleure solution a > p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Merci, c'était vraiment utile. Je l'ai utilisé en utilisant un crochet personnalisé comme dans l'article lié en utilisant ce problème à l'aide de la position du crochet si est infectueux était vrai et rien sinon.
avec réact 16.7 Vous pouvez utiliser des crochets pour le faire: dans cet exemple réact.memo () garantit que le composant est uniquement redessiné si l'état ou Changement de propriétés. Similaire Usecallback () mettra en cache l'éditeur d'événement pour l'événement Mousemove , de telle sorte que cela ne sera pas recréé uniquement si isfockingmouse , SetyOffset ou sexoffset Modifier, au lieu de chaque réducteur. USEEFFECT sera appelé une fois que le composant est créé et une fois que chaque fois que les modifications apportées par le rappel . En outre, il renvoie une fonction, qui est automatiquement appelée si le composant est détruit ou le paramètre HandidayDown changements.