interface Web
js tutoriel
Optimiser le rendu des composants React: résoudre les problèmes de sur-rendu causés par le plan de la souris
Optimiser le rendu des composants React: résoudre les problèmes de sur-rendu causés par le plan de la souris
Cet article vise à résoudre les problèmes de sur-rendu déclenchés par OnMouseOver dans les applications React. En remplaçant OnMouseover par OnMouseenter et combiné avec OnMouseout par OnMouseleave, vous pouvez réduire considérablement la rediffusion des composants inutile et améliorer les performances de l'application, en particulier lorsque vous traitez de grandes quantités de composants. L'article fournira un exemple de code et des explications détaillées pour aider les développeurs à comprendre et à appliquer cette technique d'optimisation.
L'optimisation des performances est essentielle dans les applications React. Lorsque les composants sont fréquemment renvoyés en raison de certaines interactions, l'application peut être bégayée et l'expérience utilisateur diminuera. Un scénario commun est l'effet de survol de la souris. S'il est géré mal, l'événement OnMouseOver déclenché lorsque la souris se déplace sur le composant peut entraîner la remplacement du composant.
Le problème est que l'événement OnMouseOver sera licencié lorsque le pointeur de la souris entre dans un élément et ses éléments enfants, ce qui signifie que même si la souris se déplace à l'intérieur du composant, elle continuera de déclencher OnMouseover, ce qui entraîne un réinstallation inutile.
Un moyen facile et efficace de résoudre ce problème consiste à utiliser les événements OnMouseenter et OnMouseLeave.
L'événement OnMouseenter n'est licencié que lorsque le pointeur de la souris entre dans l'élément pour la première fois, tandis que l'événement OnMouseleave n'est tiré que lorsque le pointeur de la souris quitte l'élément. Cela signifie que même si la souris se déplace à l'intérieur du composant, le rendu supplémentaire ne sera pas déclenché.
Ce qui suit est un exemple du composant TechnologyItem.jsx modifié:
importer réagir à partir de "réagir";
import {useSelector, usedispatch} à partir de "react-redux";
import {SethoveredTechnologyAction} de "../../../store/actions/quadrantactions";
import {hoveredtechnologyselector} de "../../../store/selectors/quadrantselectors";
import "./technologyitem.scss";
const TechnologyItem = ({index, nom, description, contacts, balises}) => {
const Dispatch = usedispatch ();
Const HoverEdTechnology = useelector (HoveredTechnologySelector);
const Ishovered = name === HoveredTechnology;
const OnMouseEnter = () => {
Dispatch (SethoveredTechnologyAction (nom));
};
const OnMouseLeave = () => {
Dispatch (SethoveredTechnologyAction (""));
};
Retour (
<div classname="{Ishoverred?" onmouseenter="{onMouseEnter}" onmouseleave="{OnMouseleave}">
<p>
{indice}. {nom}
</p>
</div>
));
};
Exporter par défaut React.Memo (TechnologyItem);
Modifications clés:
- Remplacez OnMouseover par OnMouseenter.
- Remplacez OnMouseout par OnMouseleave.
Notes:
- Assurez-vous que votre application a configuré correctement Redux et que SethoveredTechnologyAction et HoverEdTechnologySelector fonctionnent correctement.
- React.memo peut être utilisé pour optimiser le rendu des composants, mais uniquement si les accessoires du composant n'ont pas changé. Si les accessoires changent fréquemment, React.Memo peut ne pas apporter des améliorations de performances ou même réduire les performances.
- Si les accessoires du composant TechnologyItem changent fréquemment, envisagez d'utiliser UseCallback pour mettre en cache les fonctions OnMouseEnter et OnMouseLeave pour éviter une rediffusion inutile.
Résumer:
En remplaçant OnMouseover et OnMouseout par OnMouseenter et OnMouseLeave, le rendu excessif des composants React en raison des événements de souris peut être considérablement réduit. Cette simple technique d'optimisation peut améliorer les performances des applications et améliorer l'expérience utilisateur. Cette optimisation est particulièrement importante lorsqu'il s'agit de grandes quantités de composants ou d'interactions complexes. De plus, l'utilisation rationnelle de React.Memo et UseCallback peut également améliorer davantage les performances de rendu des composants.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1658
276
Filtrage multi-conditions JavaScript: implémentation de filtrage de produit dynamique basé sur et / ou logique
Aug 22, 2025 am 10:00 AM
Ce tutoriel présente en détail comment utiliser JavaScript pour implémenter la fonction de filtrage dynamique multi-conditions, permettant aux utilisateurs de filtrer les produits en fonction de plusieurs attributs tels que la couleur et la taille. Grâce à une structure HTML claire et à des exemples de code JavaScript, l'article montre comment gérer de manière flexible et / ou logique pour répondre aux besoins complexes de filtrage des utilisateurs et fournit des suggestions d'optimisation.
Optimiser la gestion des événements des sauts de liaison externe dynamique dans la fenêtre contextuelle jQuery
Sep 01, 2025 am 11:48 AM
Cet article vise à résoudre le problème de la redirection du bouton de redirection de liaison externe dans la fenêtre pop-up jQuery provoquant des erreurs de saut. Lorsqu'un utilisateur clique sur plusieurs liens externes successivement, le bouton Jump dans la fenêtre contextuelle peut toujours pointer vers le premier lien cliqué. La solution principale consiste à utiliser la méthode OFF ('Click') pour annuler l'ancien gestionnaire d'événements avant chaque liaison d'un nouvel événement, garantissant que le comportement de saut pointe toujours vers l'URL cible, réalisant ainsi une redirection de liens précise et contrôlable.
Créer des compteurs JavaScript en cours d'exécution par les jours ouvrables et les heures de travail
Aug 31, 2025 am 06:30 AM
Cet article détaille comment créer un compteur de synchronisation précis à l'aide de JavaScript. Le comptoir est incrémenté une fois par minute, mais ne se déroule que dans les jours ouvrables prédéfinis (du lundi au vendredi) et les heures de travail (comme 6 h à 20 h). Il peut interrompre les incréments pendant les heures de travail, mais afficher la valeur actuelle et réinitialiser automatiquement le premier jour de chaque mois, assurant la précision et la flexibilité de la logique de comptage.
Comment sélectionnez-vous les éléments par un attribut de données dans JavaScript?
Aug 30, 2025 am 01:57 AM
Vous pouvez sélectionner des éléments avec des attributs de données dans JavaScript via le sélecteur d'attribut CSS et utiliser la méthode document.QuerySelector () ou document.QuerySelectorAll () pour y parvenir. 1. Utiliser [Data-Attribute] pour sélectionner un élément avec l'attribut de données spécifié (n'importe quelle valeur); 2. Utilisez [data-attribut = "Value"] pour sélectionner un élément dont la valeur d'attribut correspond exactement; 3. Accédez à l'attribut de données via Element.Dataset, où Data-User-ID correspond à DataSet.Userid (Remplacer
Pytest et sélénium: stratégies de mise en œuvre pour les tests dynamiques basés sur les données
Aug 30, 2025 am 06:00 AM
Cet article vise à résoudre le problème selon lequel le décorateur de @ pytest.mark.Marametrise ne peut pas gérer directement les données générées lors de l'exécution lors de l'utilisation de PyTest et du sélénium pour des tests dynamiques basés sur les données. Nous explorerons les limites de pytest.mark.Parametrize en profondeur et introduirons en détail comment implémenter gracieusement les tests paramétrés en fonction de l'acquisition de données dynamiques de sélénium via la fonction de crochet Pytest_GenEReate_tests de Pytest pour assurer la flexibilité et l'efficacité des cas de test.
Optimiser le rendu des composants React: résoudre les problèmes de sur-rendu causés par le plan de la souris
Aug 22, 2025 pm 01:36 PM
Cet article vise à résoudre les problèmes de sur-rendu déclenchés par OnMouseOver dans les applications React. En remplaçant OnMouseover par OnMouseEnter et combiné avec OnMouseout par OnMouseleave, vous pouvez réduire considérablement la rediffusion des composants inutile et améliorer les performances de l'application, en particulier lorsque vous traitez un grand nombre de composants. L'article fournira un exemple de code et des explications détaillées pour aider les développeurs à comprendre et à appliquer cette technique d'optimisation.
Comment les éléments DOM créés dynamiquement sont accessibles et exploités par des scripts préchargés
Aug 30, 2025 am 11:57 AM
Cet article explore comment les scripts JavaScript peuvent être effectivement accessibles et manipulés lorsqu'ils sont chargés et exécutés avant la création d'éléments DOM dans le développement Web. Nous présenterons trois stratégies de base: passer directement les références d'élément via des valeurs de retour de fonction, en utilisant des événements personnalisés pour réaliser une communication intermodule et en utilisant MutationObserver pour écouter les changements de structure DOM. Ces méthodes peuvent aider les développeurs à résoudre les défis entre le synchronisation de l'exécution JavaScript et le chargement dynamique du contenu, garantissant que le script peut fonctionner correctement des éléments ajoutés par la suite, tels que les rendre glisserables.
JS obtient la hauteur et la largeur d'un élément
Aug 22, 2025 pm 04:16 PM
UseclientWidth / ClientHeightForvisibleContentAreAncludepadding; 2. UseOffsetWidth / OffsetheightFortTOrAnderedSize ye
