Más información sobre useLayoutEffect

Más información sobre useLayoutEffect

Más información sobre useLayoutEffect

En los últimos años, React ha solidificado su lugar en el mundo en constante cambio del desarrollo web como una de las formas más efectivas de crear interfaces de usuario interactivas y de alto rendimiento. Con la introducción de la nueva función Hooks, React revoluciona la forma en que los desarrolladores administran la lógica con estado y reutilizable en componentes funcionales.

Con Hooks, puede usar el estado y otras características de React sin escribir componentes de clase ES6. Uno de los beneficios importantes es useLayoutEffectque permite a los desarrolladores manejar y realizar efectos secundarios en los componentes de React.

En este artículo, exploraremos useLayoutEffectlos ganchos useEffecten profundidad, en qué se diferencian de los ganchos y aprenderemos cómo aprovechar adecuadamente sus capacidades para mejorar la experiencia del usuario.

¿Cuáles son los efectos secundarios de React?

Para comprender realmente useLayoutEffectqué es y qué hace, es necesario tener una comprensión sólida de los efectos secundarios de React.

Las responsabilidades principales de un componente incluyen representar la interfaz de usuario (UI), responder a las entradas y eventos del usuario y volver a representar la UI cuando sea necesario. Cuando trabaje en un proyecto de React que no forma parte del ciclo de renderizado de un componente, es posible que necesite realizar algunas tareas u operaciones. Estos se denominan "efectos secundarios".

Un efecto secundario es cualquier cosa que sucede en la aplicación que no está relacionada (al menos no directamente) con la representación de la interfaz de usuario. Por ejemplo, enviar solicitudes HTTP al servidor, almacenar datos en la memoria del navegador, configurar funciones de tiempo, etc. No hay cambios en la interfaz de usuario en estos escenarios. En otras palabras, React no volverá a renderizar tus componentes para estos escenarios.

Si bien son muy útiles en nuestras aplicaciones y son un concepto clave en la programación funcional, los efectos secundarios también son difíciles de gestionar y pueden provocar comportamientos inesperados y problemas de rendimiento si no se manejan adecuadamente.

Para manejar los efectos secundarios, puede utilizar un conjunto de ganchos integrados llamados ganchos de efectos , a saber: useEffect,, useLayoutEffect.useInsertionEffect

Entre estos ganchos, useEffectes el más utilizado por los desarrolladores de reacción en comparación con otros ganchos. Pero aquí viene el problema. ¿Funciona para varios efectos secundarios?

usoEfecto

Si ha escrito código de React utilizando componentes de clase, debe estar familiarizado con los métodos del ciclo de vida componentDidMount: componentDidUpdatey componentWillUnmount.

useEffectUn gancho es una combinación de los tres métodos del ciclo de vida, por lo que nos permite acceder a los métodos del ciclo de vida en componentes funcionales. useEffectLos ganchos se ejecutan de forma asíncrona y normalmente se utilizan para realizar solicitudes de API.

Aquí hay un ejemplo de uso:

import React, {
    
     useEffect } from 'react';

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

useEffectSe ejecuta inicialmente después de que el componente esté completamente cargado y luego cada vez que cambia el estado del componente.

¿Qué hay de malo con useEffect?

Como se mencionó anteriormente, useEffectel gancho es asíncrono, lo que tiene la desventaja obvia de que solo se puede llamar después de que el componente esté montado. Esto significa que los efectos secundarios que dependen del diseño de los componentes no se pueden useEffectrealizar utilizando .

Ahora, ¿cómo solucionamos este problema? Y ahí es useLayoutEffectdonde entra en juego.

utilizarLayoutEffect

Si bien muchos desarrolladores de React están familiarizados con el uso useEffectde ganchos, useLayoutEffectlos ganchos palidecen en comparación, pero siguen siendo una herramienta poderosa para mejorar el rendimiento de sus aplicaciones React.

A diferencia de useEffectlos ganchos, useLayoutEffectlos ganchos se ejecutan sincrónicamente, lo que significa que se ejecutan inmediatamente después de que React haya realizado todos los cambios DOM necesarios, pero justo antes de que el navegador pinte la pantalla. Tiene useEffectla misma API y sintaxis similar a la del gancho. Este gancho se introdujo para resolver algunos useEffectproblemas de diseño especiales que plagaban a los desarrolladores cuando usaban ganchos.

Aquí hay un ejemplo de uso:

import React, {
    
     useLayoutEffect } from 'react';

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

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

useLayoutEffectNormalmente useRefse utiliza con ganchos para que pueda obtener una referencia a cualquier elemento DOM que pueda usarse para leer información de diseño.

¿Cómo funciona useLayoutEffect?

A continuación se ofrece useLayoutEffectuna descripción básica de cómo funcionan los ganchos:

El usuario interactúa con la aplicación.
El estado del componente cambia.
Posteriormente, se cambia el DOM.
Si useLayoutEffectla dependencia ha cambiado, se llama a este método para borrar los efectos renderizados previamente.
Después de la limpieza, llame useLayoutEffectal gancho.
Los cambios se reflejan en la pantalla del navegador.

¿Cuándo debería utilizar useLayoutEffect?

1. Agregue un desplazamiento suave

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>
  );
};

En el código anterior, useLayoutEffectel gancho se usa para agregar una funcionalidad de desplazamiento suave al elemento contenedor. Configure un detector de eventos para escuchar eventos de desplazamiento en el objeto de ventana y llamar handlescrolla la función. Esta función desplazará suavemente el contenedor hacia la parte superior usando el método con { top: 0, behavior: 'smooth' }como parámetro .scrollTo

useLayoutEffectRealizará el desplazamiento inicial hacia arriba al montar el componente. Se agregó una funcionalidad de limpieza para eliminar los detectores de eventos cuando se descargan los componentes.

2. Elementos de animación

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>;
};

El bloque de código anterior demuestra cómo useLayoutEffectanimar la opacidad de un elemento usando . La opacidad inicial del elemento se establece en 0 y luego setTimeoutse establece en 1 después de un retraso de 1000 milisegundos usando la función. Luego useLayoutEffectaplique la animación después de montar el componente. Cuando se descarga el componente, la opacidad del elemento se restablece a 0.

3. Cuadro de entrada de enfoque automático

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

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

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

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

En el código anterior, solíamos useLayoutEffectcentrarnos automáticamente en el campo de entrada cuando se montaba el componente. Seguimos usando refpara acceder a elementos de entrada. En useLayoutEffect, llamamos al método en el elemento de entrada focuspara darle foco. Como queremos que se ejecute solo una vez, dejamos la matriz de dependencias vacía ( []). Nota: Para este ejemplo, no hay funcionalidad de limpieza ya que no es necesario revocar el foco cuando se descarga el componente.

Comparar useEffect y useLayoutEffect

	utilizar gancho de efecto	gancho useLayoutEffect
Orden de ejecución	Ejecutar después de renderizar y aplicar cualquier actualización	Se ejecuta después del renderizado pero antes de que el navegador dibuje la pantalla.
Mecanismo de ejecución	Ejecución asincrónica	Ejecución sincrónica
tiempo de ejecución	Ejecutado de forma asincrónica durante la fase de renderizado.	Ejecutar sincrónicamente durante la fase de confirmación
escenas a utilizar	Obtenga datos, suscríbase a eventos y realice efectos secundarios	Realizar mediciones y modificar el DOM sincrónicamente según el diseño.
actuación	Representación sin bloqueos y sin retrasos, optimizada para el rendimiento en la mayoría de los casos	Puede bloquear, retrasar la renderización y causar problemas de rendimiento si se usa sin cuidado
Precauciones de uso	Preferible para la mayoría de los efectos secundarios y efectos que no requieren actualizaciones visuales inmediatas.	Adecuado para efectos que deben aplicarse sincrónicamente antes de que el navegador dibuje
Representación del lado del servidor (SSR)	Se puede utilizar en entornos de renderizado tanto del lado del cliente como del lado del servidor.	No recomendado para renderizado del lado del servidor ya que puede bloquear el renderizado. Utilice en su lugar:`useEffect`

Beneficios de usar useLayoutEffect

Garantiza que el diseño sea muy consistente en todo momento y estable antes de que el usuario lo vea.
Ayuda a evitar volver a renderizar o pintar de nuevo innecesariamente al sincronizar los cambios de estado con los cambios de DOM.
Evite el parpadeo o el parpadeo del contenido no deseado : en algunos casos, el uso useLayoutEffectpuede ayudar a eliminar el parpadeo visual o los cambios de diseño que pueden ocurrir cuando es necesario reposicionar o diseñar un elemento según la información del diseño. Al realizar los cambios de diseño apropiados de forma sincrónica antes de que el navegador dibuje, evita useEffectfallas visuales que pueden ocurrir durante el uso y hay un retraso entre los cambios de diseño y la representación.

Errores del uso de useLayoutEffect

Según la documentación oficial de React, un inconveniente importante de este gancho es que puede dañar el rendimiento de la aplicación.
No se admite la representación del lado del servidor (SSR): debido a que SSR requiere una representación asincrónica para evitar bloquear el subproceso del servidor, su uso en una configuración de SSR useLayoutEffectpuede provocar una falta de coincidencia entre el contenido renderizado por el servidor y el contenido renderizado por el cliente.

Mejores prácticas para usar useLayoutEffect

Cuando utilice ganchos en React useLayoutEffect, siga las mejores prácticas para garantizar que su código se ejecute de manera correcta y eficiente. A continuación se presentan useLayoutEffectalgunas prácticas recomendadas para un uso eficaz:

useLayoutEffectEs un Hook, por lo que debe llamarse en el nivel superior del componente.
No lo llames dentro de un bucle o condicional. Si necesita hacer esto, extraiga un componente y mueva el efecto allí.
Utilice ganchos únicamente useLayoutEffectpara efectos secundarios que dependan del diseño del componente.
Puede utilizar refel objeto para acceder al diseño actual del componente.
Evite usarlo useLayoutEffectpara actualizar el estado de un componente.
Evite operaciones y cálculos costosos que puedan provocar retrasos en el procesamiento.
Considere siempre el uso de métodos alternativos, por ejemplo useEffect.
Restricciones useLayoutEffectde uso: En la mayoría de los casos, useEffectsuficientes para proporcionar la funcionalidad requerida. Úselo useLayoutEffectsólo si se requiere ejecución sincrónica y acceso rápido .DOM
Tenga en cuenta las dependencias: al useEffectigual que , useLayoutEffectel gancho también acepta una serie de dependencias como segundo argumento. Por lo tanto, asegúrese de incluir todas las dependencias relevantes para evitar una repetición innecesaria.

resumen

En este artículo, ha aprendido mucho sobre useLayoutEffectganchos, similitudes y diferencias, mejores prácticas, etc. A estas alturas, creo que sabe lo suficiente como para usarlo correctamente en su aplicación para mejorar la experiencia general y resolver problemas importantes.