Cómo usar componentes funcionales en React

¿Te has preguntado cómo crear un componente en React?

Para responder, es tan simple como crear una función que devuelva una sintaxis similar a HTML.

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

Ahora veamos qué sucedió en el código anterior.  Counteres una función que transforma un número en HTML. Y si miras con más atención, Counteres una función pura. Así es, el tipo de función que devuelve el resultado en función de sus entradas y no tiene efectos secundarios.

Esta explicación viene con una nueva pregunta. ¿Qué es un efecto secundario?

En resumen, un efecto secundario es cualquier modificación en el entorno fuera de la función o cualquier información leída del entorno exterior que pueda cambiar.

Es posible que haya notado que utilicé la sintaxis de asignación de desestructuración en la lista de parámetros para extraer el nnúmero de entrada. Eso es porque los componentes toman como entrada un solo objeto llamado "props" que tiene todas las propiedades enviadas a ellos.

Así es como nse puede configurar el parámetro desde cualquier otro componente:

En cierto sentido, esta sintaxis se puede imaginar como una llamada a función Counter({n: 1}). ¿No es así?

Continuemos nuestro viaje.

¿Pueden tener estado los componentes funcionales? Como sugirió el nombre del componente, quiero almacenar y cambiar un contador. ¿Qué pasa si simplemente declaramos una variable que contiene un número dentro del componente? ¿Funcionará?

Vamos a averiguar.

Comenzaré declarando la variable dentro del componente funcional.

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

Ahora agreguemos la función que incrementa el número y lo registra en la consola. Usaré la función como controlador de eventos para el evento de clic.

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

Si miramos la consola vemos que el número en realidad se incrementa, pero eso no se refleja en la pantalla. ¿Algunas ideas?

Lo hiciste bien ... necesitamos cambiar el número, pero también necesitamos volver a renderizarlo en la pantalla.

Aquí es donde entra en juego la función de utilidad de React Hooks. Por cierto, estas funciones de utilidad se denominan ganchos y comienzan con la palabra "utilizar". Vamos a utilizar uno de ellos, useState. Registraré también el texto "re-renderizar" en la consola para ver cuántas veces Counterse llama realmente a la función.

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

Leamos lo que useState()hace.

¿Qué useStatedevuelve? Devuelve un par de valores: el estado actual y una función que lo actualiza.

En nuestro caso nes el estado actual y setN()es la función que lo actualiza. ¿Ha revisado la consola para ver cuántas veces se muestra el texto "re-renderizar"? Dejaré eso para que lo averigües.

Podemos actualizar el estado no solo estableciendo el nuevo valor, sino también proporcionando una función que devuelva el nuevo valor.

En nuestro caso, se llamará a la función que proporciona el nuevo valor increment(). Como ves, increment()es una función pura.

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

Para entender qué setN(increment)hace, leamos la documentación.

Pasar una función de actualización le permite acceder al valor del estado actual dentro del actualizador.

OK, entonces increment()se llama con el nestado actual y se usa para calcular el nuevo valor de estado.

Pensamientos finales

Resumamos lo que descubrimos.

En React podemos simplemente definir un componente usando una función que devuelve una sintaxis similar a HTML.

React Hooks nos permite definir el estado en dichos componentes funcionales.

Y por último, pero no menos importante, finalmente nos deshicimos de los thispseudoparámetros en los componentes. Tal vez hayas notado que se thisvuelve molesto cambiar de contexto cuando no lo esperas. No te preocupes por eso. No lo vamos a utilizar thisen componentes funcionales.

Si has llegado hasta aquí, también puedes echar un vistazo a mis libros.

Discover Functional JavaScript fue nombrado uno de los¡Los mejores libros de programación funcional de BookAuthority !

Para obtener más información sobre cómo aplicar técnicas de programación funcional a React, eche un vistazo a Functional React.

Aprenda React funcional , de una manera basada en proyectos, con Arquitectura funcional con React y Redux .

Envíeme sus comentarios.