¡El Effect Hook de React resuelve problemas de rendimiento y errores potenciales en los componentes funcionales!

Hook es una función especial que comienza con el uso y permite que el componente de función tenga ciertas características del componente calss. Effect Hook se refiere a la función especial useEffect, que permite que los componentes de la función realicen operaciones personalizadas una vez finalizada la renderización.

Utilice useState en useEffect con precaución, porque hará que se vuelva a llamar a useEffect después de que se renderice el componente, formando un bucle infinito. La forma correcta: envuelva el método useState con declaraciones condicionales para definir las condiciones de salida y evitar bucles infinitos.

Deje que el componente solo supervise los cambios en datos específicos y luego realice operaciones posteriores al renderizado, ignorando operaciones innecesarias, lo que optimiza el rendimiento del componente.

Solo hay un parámetro, que se llama después de que se completa la renderización de cada componente y antes de la siguiente renderización.

Hay dos parámetros, el segundo parámetro es una matriz vacía ([]). Se llama después de que el componente se carga y representa por primera vez, y solo se llama una vez.

Hay dos parámetros, el segundo parámetro es una matriz. useEffect solo se llamará cuando cambie el valor en la matriz.

Cuando se llama a useEffect, realiza algunas operaciones (como configurar un temporizador y acceder a algunos recursos de la red). Cuando se desinstala el componente, se deben realizar algunas operaciones de limpieza para evitar pérdidas de memoria y otros problemas.

Solución: simplemente devuelva una función de limpieza en useEffect, y React llamará a la función de limpieza antes de que se descargue el componente.

useEffect no especifica dependencias, lo que significa que useEffect solo se ejecutará una vez y el recuento obtenido internamente es siempre el valor inicial 0, lo que da como resultado lt; {count}lt; la pagina. Siempre 1.

Agregue la dependencia de recuento en useEffect, de modo que cada vez que useEffect ejecute setCount y el recuento cambie, se llamará nuevamente a useEffect, lo que puede resolver el problema, pero esto traerá otro problema, cada vez que se ejecute useEffect El cronómetro se borrará y se reiniciará nuevamente, lo cual no es lo que queremos.

Adopte la función de actualización de setState y permita que setCount obtenga y actualice el recuento por sí mismo, lo que permite a useEffect romper completamente con su dependencia del recuento y lograr el efecto final deseado.

Utilice useRef y useEffect para lograr esto, hágalo solo si realmente no puede encontrar una mejor manera, porque confiar en los cambios hará que el componente sea más impredecible.

useEffect se llamará y ejecutará después de que el componente se haya renderizado por completo. Si el useEffect ejecutado en este momento implica cambios DOM visibles, puede generar un salto visual para el cliente. En este momento, puede considerar su uso. useLayoutEffect, el método de uso es exactamente el mismo que useEffect, pero el momento de la llamada es diferente.