Componentes con funciones y funciones flecha

Un componente funcional es una función que devuelve JSX. Puedes declararlo con function o con una función flecha, también llamada lambda en algunos contextos. Los dos estilos sirven para crear componentes.

1function MiComponente() {
2  return <div>Soy un componente</div>;
3}
4
5const OtroComponente = () => <p>Soy un componente flecha</p>;
6
7export default function Ejem_02() {
8  return (
9    <div>
10      <MiComponente />
11      <MiComponente />
12      <MiComponente />
13      <OtroComponente />
14    </div>
15  );
16}

Cada etiqueta <MiComponente /> crea una aparición del componente en la interfaz. Reutilizamos la definición; cada aparición podrá tener sus propios datos y estado.

Retorno explícito e implícito #

Una flecha con una expresión puede devolverla sin escribir return. Si añades llaves al cuerpo, necesitas devolver el resultado explícitamente:

1const Aviso = () => {
2  return <p>Recuerda guardar los cambios.</p>;
3};

No confundas las llaves del cuerpo de una función con las llaves de una expresión dentro de JSX. Una función con llaves y sin return no devolverá el elemento que esperas.

Separar componentes en archivos #

Crea src/components/MiComponente.tsx, mueve allí la función y expórtala por defecto. En App.tsx puedes importarla con import MiComponente from './components/MiComponente';. Un archivo solo puede tener una exportación por defecto, aunque puede tener varias exportaciones con nombre.

Define los componentes fuera del cuerpo de otros componentes. Así React puede reconocer su identidad entre renders y evitas reinicios inesperados de estado por crear una función de componente nueva en cada render.

Prueba tú #

Crea Tarjeta como función flecha y muéstrala dos veces. Después reescríbela con function y comprueba que el resultado visual es el mismo.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.