29,914 lecturas

Cómo usar componentWillMount con componentes funcionales en React

por Rob Marshall2m2020/08/10

Demasiado Largo; Para Leer

Los componentes funcionales pueden llevar a cabo eventos del ciclo de vida sin necesidad de convertirse en un componente basado en clases. Se necesita escribir menos código para lograr el mismo objetivo. Administre componentWillMount con useEffect con una función de retorno activada cuando un componente se desmonta del DOM. Esta es la única vez que se activará en el procesamiento del componente (componentWillMount). Esto significa que puede usar fácilmente y dentro de los componentes funcionales. Esto significa que puede usar ambas funciones en la misma llamada a la función useEffect.

Company Mentioned

featured image - Cómo usar componentWillMount con componentes funcionales en React

Los componentes funcionales son mucho más eficientes que los componentes basados en clases. Se necesita escribir menos código para lograr el mismo objetivo.

Esta publicación explica cómo los componentes funcionales pueden llevar a cabo eventos del ciclo de vida sin necesidad de convertirse en un componente basado en clases.

Resulta que todo se puede administrar a través de useEffect .

he utilizado

 useEffect

en el pasado para gestionar las llamadas a la API, así como para implementar

 componentWillMount

, pero nunca

 componentWillUnmount

. ¡Resulta que ambos son muy similares!

Cómo administrar el componenteWillMount con useEffect

Para entender cómo podemos usar

 componentWillUnmount

con componentes funcionales, primero tenemos que ver cómo el componente gestiona el montaje con useEffect.

 import React, { useEffect } from 'react' ; const ComponentExample => () => { useEffect( () => { // Anything in here is fired on component mount. }, []); }

Si pasamos una matriz vacía como segundo argumento, le dice a la función useEffect que se active en el procesamiento del componente (componentWillMount). Esta es la única vez que disparará.

Con esto en mente, ¿cómo podemos modificar el código para que funcione con componentWillUnmount? Resulta que la solución es muy simple.

Cómo administrar el componenteWillUnmount con useEffect

Si agrega una función de retorno dentro de la función useEffect, se activa cuando un componente se desmonta del DOM. Esto parece:

 import React, { useEffect } from 'react' ; const ComponentExample => () => { useEffect( () => { return () => { // Anything in here is fired on component unmount. } }, []) }

Combinando ambas soluciones

Esto significa que puedes usar

 componentDidMount

, y

 componentWillUnmount

en la misma llamada a la función useEffect. Reducción drástica de la cantidad de código necesario para administrar ambos eventos del ciclo de vida. Esto significa que puede usar fácilmente

 componentDidMount

 componentWillUnmount

dentro de los componentes funcionales. Al igual que:

 import React, { useEffect } from 'react' ; const ComponentExample => () => { useEffect( () => { // Anything in here is fired on component mount. return () => { // Anything in here is fired on component unmount. } }, []) }

¿Interesado en aprender más?

Escribo regularmente sobre cómo trabajar con React, así como sobre otros consejos y trucos para desarrolladores. Si tiene alguna pregunta, envíeme un mensaje en Twitter @robertmars y le responderé tan pronto como pueda. Sería genial saber de usted.

Publicado anteriormente en https://thoughtsandstuff.com/componentwillunmount-funcional-components-react