En el último post vimos cómo escribir un componente de clase de React, con sus métodos para controlar el ciclo de vida y algunos detalles más. En este voy a intentar explicar las bases de los componentes funcionales.
Como este articulo no incluye gestión del ciclo de vida ni estados porque esos puntos tienen un post dedicado, aprovecho para enlazarlo con el anterior artículo sobre la desestructuración.
Para empezar, lo más sencillo:
const Greeting = () => {
return (
<p>Hello world</p>
)
}
Podría simplificarse incluso más (const Greeting = () => <p>Hello world</p>) pero como sabemos que vamos a ir ampliándolo no tendría mucho sentido ir a una versión tan reducida.
Cómo recibir props
Voy a poner tres ejemplos para ver las opciones más comunes: recibir el objeto props, desestructurarlo y aplicarle valores por defecto.
El único parámetro de la función es el objeto props, y es opcional.
const Greeting = (props) => {
return (
<p>Hello {props.name}</p>
)
}
Normalmente sabremos los valores que vamos a recibir, así que sería una buena práctica desestructurar ya que serviría para, de alguna manera, describir qué opciones deberían estar disponibles.
const Greeting = ({ name }) => {
return (
<p>Hello {name}</p>
)
}
Y cuando estamos desestructurando podemos describir valores por defecto:
const Greeting = ({ name = "Anonymous" }) => {
return (
<p>Hello {name}</p>
)
}
Cuestiones importantes
Un componente funcional es básicamente esto y no necesita nada más, pero hay que tener en cuenta algunas cosas. Estos componentes no «viven» como una instancia que se mantiene en el tiempo; cada vez que hay un cambio (props o state, que veremos más adelante) se vuelve a ejecutar y todo el código se repite. Esto al principio suele dar muchos problemas de exceso de renderizados o comportamientos inesperados.
Es por eso que dependen muchísimo de los hooks. Si no te suenan no te preocupes, a partir de ahora los verás por todos lados, empezando por el próximo artículo sobre los hooks principales.
Photo by Devanshu Damle on Unsplash