Si en lugar de usar un componente de clase se va con un componente funcional, el proceso es muy similar. Las mayores diferencias están en cómo se maneja el ciclo de vida y cómo se usa el estado. Los componentes funcionales no tienen métodos de ciclo de vida, pero te permiten controlar cuando un componente se actualiza. En lugar de pensar, «¿Cómo puedo replicar la actualización de un componente cuando se monta?» podemos pensar, «¿Cómo puedo actualizar el componente cuando cambia algún valor?» Para esta funcionalidad, usaremos el gancho useEffect. Tampoco existe este.setState en un componente funcional. Podemos usar el gancho useState para dar el estado de su componente. Así es como se vería eso:
1234567891011121314151617181920importReactfrom "react";constUserComponent=props= >const[email, setEmail]=React.useState("");React. useEffect(()= > {constfetchUserEmail=async()= >{const response =awaitfetch("/emails");const{ email }=esperar respuesta. json();setEmail(email);};fetchUserEmail();},[]);return(<div>h1;;A user</h1;<p>{email}</p></div;);};js
El gancho useEffect toma dos argumentos: una función como el primer argumento y una matriz de dependencia como el segundo. La matriz de dependencias toma una lista de valores, y cuando alguno de esos valores cambie, se ejecutará la función que pasaste como primer argumento. Si no pasas ningún valor a la matriz de dependencias, la función sólo se ejecutará una vez cuando el componente se cargue. Este es un comportamiento similar al del método de ciclo de vida de componentDidMount.
Estás creando una variable de estado llamada email con esta línea:
1const[email, setEmail]=React.useState("");js
useState siempre devuelve una matriz con dos valores: el valor de estado actual y una función actualizadora, siempre en ese orden. Esto significa que podemos desestructurar esa matriz como estamos haciendo arriba. Pasar la cadena vacía a useState significa que estamos predeterminando el valor del correo electrónico a una cadena vacía. Llamar a setEmail es como llamar a this.setState en un componente de clase. El componente se volverá a generar con el nuevo valor de correo electrónico.
Como en el ejemplo del componente de clase, no siempre tienes que manejar las promesas en el gancho useEffect.
12345678910111213141516171819importReactfrom "react";constUserComponent=props= > {const[email, setEmail]=React.useState("");constfetchUserEmail=async()= > >const response =awaitfetch("/emails");const{ email }=wait response. json();setEmail(email);};return(<div><h1;;Un usuario</h1;p;;{email}</p;<botón onClick={fetchUserEmail};FetchEmail</botón&;</div;);};js
En el ejemplo anterior, estamos disparando la promesa de ir a buscar al pulsar el botón de «buscar correo electrónico». Cuando la promesa se resuelva, llamaremos a setEmail con la nueva dirección de correo electrónico.