En savoir plus sur useLayoutEffect

En savoir plus sur useLayoutEffect

Ces dernières années, React a consolidé sa place dans le monde en constante évolution du développement Web en tant que l'un des moyens les plus efficaces de créer des interfaces utilisateur performantes et interactives. Avec l'introduction de la nouvelle fonctionnalité Hooks, React révolutionne la façon dont les développeurs gèrent la logique avec état et réutilisable dans les composants fonctionnels.

Avec Hooks, vous pouvez utiliser l'état et d'autres fonctionnalités de React sans écrire de composants de classe ES6. L'un des points importants est useLayoutEffectqu'il permet aux développeurs de gérer et d'effectuer des effets secondaires dans les composants React.

Dans cet article, nous explorerons en profondeur useLayoutEffectles hooks useEffect, en quoi ils diffèrent des hooks, et apprendrons comment exploiter correctement leurs capacités pour améliorer l'expérience utilisateur.

Quels sont les effets secondaires dans React ?

Pour vraiment comprendre useLayoutEffectde quoi il s’agit et ce qu’il fait, il est nécessaire d’avoir une solide compréhension des effets secondaires dans React.

Les principales responsabilités d'un composant incluent le rendu de l'interface utilisateur (UI), la réponse aux entrées et aux événements de l'utilisateur, et le rendu de l'interface utilisateur si nécessaire. Lorsque vous travaillez sur un projet React qui ne fait pas partie du cycle de rendu d'un composant, vous devrez peut-être effectuer certaines tâches ou opérations. C’est ce qu’on appelle des « effets secondaires ».

Un effet secondaire est tout ce qui se produit dans l’application et qui n’est pas lié (du moins pas directement) au rendu de l’interface utilisateur. Par exemple, envoyez des requêtes HTTP au serveur, stockez des données dans la mémoire du navigateur, définissez des fonctions temporelles, etc. Il n’y a aucune modification de l’interface utilisateur dans ces scénarios. En d'autres termes, React ne restituera pas vos composants pour ces scénarios.

Bien qu'ils soient très utiles dans nos applications et constituent un concept clé en programmation fonctionnelle, les effets secondaires sont également difficiles à gérer et peuvent entraîner des comportements inattendus et des problèmes de performances s'ils ne sont pas gérés correctement.

Pour gérer les effets secondaires, vous pouvez utiliser un ensemble de hooks intégrés appelés Effect hooks , à savoir : useEffect, useLayoutEffect, useInsertionEffect.

Parmi ces hooks, useEffectc'est le plus utilisé par les développeurs de React par rapport aux autres hooks. Mais voici le problème. Est-ce que ça marche pour divers effets secondaires ?

utiliserEffet

Si vous avez écrit du code React à l'aide de composants de classe, vous devez connaître les méthodes de cycle de vie : componentDidMount, componentDidUpdateet componentWillUnmount.

useEffectUn hook est une combinaison des trois méthodes de cycle de vie, il nous permet donc d'accéder aux méthodes de cycle de vie dans les composants fonctionnels. useEffectLes hooks s'exécutent de manière asynchrone et sont généralement utilisés pour effectuer des requêtes API.

Voici un exemple d'utilisation :

import React, {
    
     useEffect } from 'react';

function MyComponent() {
    
    
  useEffect(() => {
    
    
		// 副作用逻辑在这里
    console.log('Component rendered!');
		// 清理函数（可选）
    return () => {
    
    
      console.log('Component unmounted!');
    };
  }, []); // 空依赖数组，只在挂载时运行
  return (
    <div>
      {
    
    /* Component JSX */}
    </div>
  );
}

useEffectS'exécute initialement après le chargement complet du composant, puis à chaque fois que l'état du composant change.

Quel est le problème avec useEffect ?

Comme mentionné ci-dessus, useEffectle hook est asynchrone, ce qui présente l'inconvénient évident qu'il ne peut être appelé qu'une fois le composant monté. Cela signifie que les effets secondaires qui dépendent de la disposition des composants ne peuvent pas être useEffectréalisés à l'aide de .

Maintenant, comment pouvons-nous résoudre ce problème, et c'est là useLayoutEffectqu'intervient.

useLayoutEffect

Bien que de nombreux développeurs React soient habitués à utiliser useEffectdes hooks, useLayoutEffectceux-ci ne sont rien en comparaison, mais restent un outil puissant pour améliorer les performances de vos applications React.

Contrairement useEffectaux hooks, useLayoutEffectles hooks s'exécutent de manière synchrone, ce qui signifie qu'ils s'exécutent immédiatement après que React a effectué toutes les modifications DOM nécessaires, mais juste avant que le navigateur ne peigne l'écran. Il a useEffectla même API et une syntaxe similaire à celle du hook. Ce hook a été introduit pour résoudre certains useEffectproblèmes de mise en page particuliers qui tourmentaient les développeurs lors de l'utilisation de hooks.

Voici un exemple d'utilisation :

import React, {
    
     useLayoutEffect } from 'react';

function MyComponent() {
    
    
  useLayoutEffect(() => {
    
    
		// 在这里执行副作用
		// 此代码在组件渲染之后但在浏览器绘制屏幕之前运行
    
    return () => {
    
    
			// 清理代码在这里（可选）
    };
  }, []);

  return (
		// 组件的 JSX 代码
  );
}

useLayoutEffectGénéralement useRefutilisé avec des hooks afin que vous puissiez obtenir une référence à n'importe quel élément DOM pouvant être utilisé pour lire les informations de mise en page.

Comment fonctionne useLayoutEffect ?

Voici useLayoutEffectun aperçu de base du fonctionnement des hooks :

• L'utilisateur interagit avec l'application.
• L'état du composant change.
• Ensuite, le DOM est modifié.
• Si useLayoutEffectla dépendance a changé, cette méthode est appelée pour effacer les effets précédemment rendus.
• Après le nettoyage, appelez useLayoutEffectle crochet.
• Les modifications sont reflétées sur l'écran du navigateur.

Quand devez-vous utiliser useLayoutEffect ?

1. Ajoutez un défilement fluide

import React, {
    
     useRef, useLayoutEffect } from 'react';

const SmoothScrolling = () => {
    
    
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    
    
    const container = containerRef.current;

    const handleScroll = () => {
    
    
			// 平滑滚动到容器顶部
      container.scrollTo({
    
    
        top: 0,
        behavior: 'smooth',
      });
    };

		// 当组件被挂载时滚动到顶部
    handleScroll();

		// 添加事件侦听器以在后续滚动时滚动到顶部
    window.addEventListener('scroll', handleScroll);

    return () => {
    
    
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div ref={
    
    containerRef}>
      {
    
    /* 你的内容 */}
    </div>
  );
};

Dans le code ci-dessus, useLayoutEffecthook est utilisé pour ajouter une fonctionnalité de défilement fluide à l'élément conteneur. Configurez un écouteur d'événements pour écouter les événements de défilement sur l'objet window et appelez handlescrollla fonction. Cette fonction fera défiler en douceur le conteneur vers le haut en utilisant la méthode avec { top: 0, behavior: 'smooth' }comme paramètre .scrollTo

useLayoutEffectEffectuera le défilement initial vers le haut lors du montage du composant. Ajout d'une fonctionnalité de nettoyage pour supprimer les écouteurs d'événements lorsque les composants sont déchargés.

2. Éléments d'animation

import React, {
    
     useRef, useLayoutEffect } from 'react';

const AnimatingElements = () => {
    
    
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    
    
    const element = elementRef.current;

		// 在挂载时为元素的不透明度设置动画
    element.style.opacity = 0;
    setTimeout(() => {
    
    
      element.style.opacity = 1;
    }, 1000);

    return () => {
    
    
			// 组件卸载时清理动画
      element.style.opacity = 0;
    };
  }, []);

  return <div ref={
    
    elementRef}>Animate me!</div>;
};

Le bloc de code ci-dessus montre comment useLayoutEffectanimer l'opacité d'un élément à l'aide de . L'opacité initiale de l'élément est définie sur 0 puis setTimeoutsur 1 après un délai de 1 000 millisecondes à l'aide de la fonction. Appliquez ensuite useLayoutEffectl'animation une fois le composant monté. Lorsque le composant est déchargé, l'opacité de l'élément est réinitialisée à 0.

3. Zone de saisie de la mise au point automatique

import React, {
    
     useRef, useLayoutEffect } from 'react';

const AutoFocusInput = () => {
    
    
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    
    
    inputRef.current.focus();
  }, []);

  return <input ref={
    
    inputRef} />;
};

Dans le code précédent, nous nous useLayoutEffectconcentrions automatiquement sur le champ de saisie lorsque le composant est monté. Nous continuons à utiliser refpour accéder aux éléments d'entrée. Dans useLayoutEffect, nous appelons la méthode sur l'élément d'entrée focuspour lui donner le focus. Parce que nous voulons qu'il ne s'exécute qu'une seule fois, nous laissons le tableau des dépendances vide ( []). Remarque : Pour cet exemple, il n'existe aucune fonctionnalité de nettoyage puisque le focus n'a pas besoin d'être révoqué lorsque le composant est déchargé.

Comparez useEffect et useLayoutEffect

	utiliser le crochet d'effet	crochet useLayoutEffect
Ordre d'exécution	Exécuter après le rendu et l'application des mises à jour	S'exécute après le rendu mais avant que le navigateur ne dessine l'écran
Mécanisme d'exécution	Exécution asynchrone	Exécution synchrone
timing d'exécution	Exécuté de manière asynchrone pendant la phase de rendu	Exécuter de manière synchrone pendant la phase de validation
scènes à utiliser	Obtenez des données, abonnez-vous à des événements et effectuez des effets secondaires	Effectuer des mesures et modifier le DOM de manière synchrone en fonction de la disposition
performance	Rendu non bloquant et non retardé, optimisé pour les performances dans la plupart des cas	Peut bloquer, retarder le rendu et entraîner des problèmes de performances s'il est utilisé avec négligence
Précautions d'emploi	Préférable pour la plupart des effets secondaires et des effets qui ne nécessitent pas de mises à jour visuelles immédiates.	Convient aux effets qui doivent être appliqués de manière synchrone avant que le navigateur ne dessine
Rendu côté serveur (SSR)	Peut être utilisé dans les environnements de rendu côté client et côté serveur.	Non recommandé pour le rendu côté serveur car cela peut bloquer le rendu, utilisez plutôt :useEffect

Avantages de l'utilisation de useLayoutEffect

• Cela garantit que la mise en page est très cohérente et stable avant que l’utilisateur ne la voie.
• Cela permet d'éviter un nouveau rendu ou une repeinture inutile en synchronisant les changements d'état avec les changements du DOM.
• Empêcher le scintillement ou le scintillement indésirable du contenu : dans certains cas, l'utilisation useLayoutEffectpeut aider à éliminer le scintillement visuel ou les changements de mise en page qui peuvent se produire lorsqu'un élément doit être repositionné ou stylisé en fonction des informations de mise en page. En effectuant les modifications de mise en page appropriées de manière synchrone avant que le navigateur ne s'affiche, vous évitez useEffectles problèmes visuels qui peuvent survenir lors de l'utilisation et il y a un délai entre les modifications de mise en page et le rendu.

Pièges liés à l'utilisation de useLayoutEffect

• Selon la documentation officielle de React, un inconvénient majeur de ce hook est qu'il peut nuire aux performances des applications.
• Le rendu côté serveur (SSR) n'est pas pris en charge : étant donné que SSR nécessite un rendu asynchrone pour éviter de bloquer le thread du serveur, son utilisation dans un paramètre SSR useLayoutEffectpeut entraîner une incompatibilité entre le contenu rendu par le serveur et le contenu rendu par le client.

Meilleures pratiques d'utilisation de useLayoutEffect

Lorsque vous utilisez des hooks dans React useLayoutEffect, suivez les meilleures pratiques pour garantir que votre code s'exécute correctement et efficacement. Voici useLayoutEffectquelques pratiques recommandées pour une utilisation efficace :

• useLayoutEffectIl s'agit d'un Hook, il doit donc être appelé au niveau supérieur du composant.
• Ne l'appelez pas dans une boucle ou conditionnellement. Si vous devez le faire, extrayez un composant et déplacez-y l'effet.
• Utilisez uniquement useLayoutEffectdes hooks pour les effets secondaires qui dépendent de la disposition des composants.
• Vous pouvez utiliser refl'objet pour accéder à la présentation actuelle du composant.
• Évitez d'utiliser useLayoutEffectpour mettre à jour l'état d'un composant.
• Évitez les opérations et calculs coûteux qui peuvent entraîner des retards de rendu.
• Pensez toujours à utiliser des méthodes alternatives, par exemple useEffect.
• Restrictions useLayoutEffectd'utilisation : Dans la plupart des cas, useEffectsuffisantes pour fournir la fonctionnalité requise. À utiliser useLayoutEffectuniquement si une exécution synchrone et un accès rapide sont requis .DOM
• Notez les dépendances : tout useEffectcomme , useLayoutEffectle hook accepte également un tableau de dépendances comme deuxième paramètre. Par conséquent, assurez-vous d’inclure toutes les dépendances pertinentes pour éviter un nouveau rendu inutile.

résumé

Dans cet article, vous avez beaucoup appris sur useLayoutEffectles hooks, les similitudes et les différences, les meilleures pratiques, etc. À présent, je pense que vous en savez suffisamment pour l’utiliser correctement dans votre application afin d’améliorer l’expérience globale et de résoudre des problèmes majeurs.