Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Qué son los High Order Components

12/19
Recursos

Aportes 20

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

12.-Qué son los High Order Components


Las funciones como las conocemos pueden devolvernos un valor en sus returns, pero estas funciones de “orden superior”, son funciones que devuelven otras funciones.


Si llamamos a la high order function y le enviamos un parámetro no tendremos todavía un resultado, como está devolviendo otra función tenemos que llamar a esa función que obtenemos luego de llamar a la de orden superior, enviarle los nuevos parámetros que necesita la función de retorno y entonces si, obtendremos nuestro resultado.

Creo que he pasado casi todos los cursos de JavaScript y no he escuchado, si mal no recuerdo, ‘currin’ functions por ningún lado, por favor si alguien me dice en que curso esta para ir a verlo se lo agradezco 😃.
Lo más cercano a eso son los “closures”, funciones que devuelven otras funciones y que recuerdan el valor de las variables declaradas en el ámbito léxico de la función de primer orden. Los “closures” tienen muchas aplicaciones gracias a este efecto.


Luego me puse a buscar y encontré el concepto de: función de orden superior (HOF) y es aquella que recibe una función como parámetro y retornan otra función. Evidentemente que con esta estructura es capaz de hacer lo mismo que un “closure” porque en esencia lo es.
Los componentes en React se benefician de esto al parecer por ser funciones.
Si a un componente le pasamos como parámetro otro componente( equivale a función que recibe otra función) y luego regresamos otro componente, que mediante sus propias props y las variables (con efecto closure) sea capaz de modificar el componente que se recibió antes, entonces entregamos un resultado diferente para cada componente que se le pase al HOC.


-Con esto podemos pasarle propiedades a nuestro componente (como el ejemplo de la API de la clase) algo como lo que hace el context y los hooks. (proveer props a los componentes de react).
-También podemos agregarle elementos al componente o convertirlo en hijo de otro componente.

👩‍🔬 Qué son los High Order Components

Apuntes

  • Son funciones que retornan otras funciones aplicando el concepto funcional currying
function highOrderFunction(var1) {
	return function returnFunction(var2) {
		return var1 + var2;
	}
}

const withSum1 = highOrderFunction(1);
const sumTotal = withSum1(2);

// 3

Debido a que los componentes son funciones podemos también aplicar este concepto

// Caso base

function Componente(props){
	return <p>...</p>
}

function highOrderComponent() {
	return function Componente(props) {
		return <p>...</p>
	}
}
function highOrderComponent(WrappedComponent) {
	return function Componente(props) {
		return (
			<WrappedComponent
				{...algoEspecial}
				{...props}
			/>
		);
	}
}
  • De esta manera estamos personalizando varios aspectos del componente deseado, como:
    • Los parámetros de las funciones nos permiten configurar el componente que envuelve, las props
    • Podemos reutilizar los HOC

Ejemplos

function withApi(WrappedComponent) {
	const apiData = fetchApi('https://api.com');
	
	return function WrappedComponentWithApi(props) {
		if (apidData.loading) return <p>Loading</p>;
		return(
			<WrapperdComponent data={apiData.json} />
		);
	}
}
  • Antes de retornar el componente en sí, hace una petición y entrega al componente esa información
  • Además que podemos personalizar el estado de carga
function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	);
}

const TodoBoxWithApi = withApi(TodoBox);
  • También podemos agregar más “capas” para tener más personalizaciones como por ejemplo
function withApi(apiUrl){
	return function withApiUrl(WrappedComponent) {
		const apiData = fetchApi(apiUrl);
		
		return function WrappedComponentWithApi(props) {
			if (apidData.loading) return <p>Loading</p>;
			return(
				<WrapperdComponent data={apiData.json} />
			);
		}
	}
}
function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	);
}

const TodoBoxWithApi = withApi('https://api.com')(TodoBox);
  • Esto nos permite poder extender bastante su uso aplicándolo como

En caso de querer saber más acerca del concepto de currying comparto esta página de JavaScript info en español donde me pareció que el concepto esta bastante bien explicado

Ok, veo en varios comentarios que hay confusion entre las HOF y los closures.
.

Para empezar tratando de resolver la duda, no son lo mismo.
Son conceptos diferentes.
Pueden llegar a trabajar juntos muchas veces pero como mencioné, son conceptos individuales.

.
Antes hay que entender que es una first class function.
Los lenguajes con funciones de primera clase (first class functions) tratan a las funciones como si fueran variables. Es por eso que en JS nosotros podemos guardar funciones en variables, etc. Usarlas como cualquier otro valor.

.
Ahora, las funciones de orden superior (high order functions) son simplemente funciones que retornan una función, que toman una función como argumento, o ambas. Es decir que aprovechan las ventajas de las first class functions (que se pueden pasar como parametro y demas).
.

Y los closures son como en JS las funciones pueden ‘recordar’ o alcanzar las variables que fueron declaradas en el ambito en el que la misma function fue retornada.
Es decir pueden preservar su ámbito externo dentro de su ámbito interno.
Con ambito, me refiero al scope, o contexto.

.

Ejm: Veamos la sig. funcion:

const myCounterFunc = () => {
  let counter = 0
  return () => ++counter
}

const incrementCounter = myCounterFunc();
incrementCounter() // 1
incrementCounter() // 2
incrementCounter() // 3

.

  • myCounterFunc es una high order function porque esta retornando otra funcion, la que aumenta la variable counter, y al mismo tiempo es una fisrt class function porque la puedo guardar en una variable, en este caso en incrementCounter.
  • Finalmente en incrementCounter estamos usando los closures. En esta funcion se guarda el ambito de la funcion de retorno, es decir que es capaz de recordar a la variable counter y su ultimo valor.

Ni sabia que había un curso de Js funcional, no estaba en mi ruta. No confíes en mi Juan David😫 he llegado aqui sin topar ese curso, prometo ir para allá cuando termine este curso 😌

Espero que la siguiente imagen pueda explicar la relación entre los componentes en como se mueven de un lugar a otro, al igual que sus props.

¡Ey tú! Si te sientes más [email protected] que nada en esta clase es porque mínimo te saltaste 3 cursos de JavaScript antes de este y lo sabes, [email protected] 😅.
.

💻Los temas que mínimo necesitas para entender esta clase, creo yo, son:
.
1. Scope.
2. This.
3. High Order Functions.
4. Closures.
5. Currying.

.
Y en cada tema hay otros más profundos detrás que están en la Escuela de JavaScript y la Escuela de Desarrollo Web.

Veo la clase y me saltan alertas mentales de un “callback hell” pero con HOC … abusar de ellos parece que genera codigo en diagonal y complica la lectura del mismo.

El uso que le veo mas cercano es cuando se tienen componentes repetitivos, por ejemplo, si quieres hacer un motor de blog. Tienes muchos elementos como titulos, subidas de imagenes, videos, parrafos, links, y quieres que transforme el post del usuario en elementos del navegador. La idea no es que el usuario escriba h1, p, canva, picture etc, sino que con un par de clicks e input del teclado pueda agregarlo. Pueden ir en una carpeta a parte y que se llamen cuando se necesite. Tambien lo veo si el usuario quiere modificar el header o el layout de su blog.

Currying me suena a cocina, nunca habia escuchado el termino en programación

Que genio!
Muy buen concepto para cuando tenemos que pasar data a un componente ya creado.
También se puede modificar el padre del componente para enviarle la data. Pero esto afectaría la composición y reusabilidad de los componentes en sí.

Esto tambien aplica en las closures (que se enseñan en els cursos de JS)

Considera el siguiente ejemplo:

function creaFunc() {
  var nombre = "Mozilla";
  function muestraNombre() {
    alert(nombre);
  }
  return muestraNombre;
}

var miFunc = creaFunc();
miFunc(); 

Si se ejecuta este código tendrá exactamente el mismo efecto que el ejemplo anterior: se mostrará el texto “Mozilla” en un cuadro de alerta de Javascript. Lo que lo hace diferente (e interesante) es que la función externa nos ha devuelto la función interna muestraNombre() antes de ejecutarla.

Puede parecer poco intuitivo que este código funcione. Normalmente, las variables locales dentro de una función sólo existen mientras dura la ejecución de dicha función. Una vez que creaFunc() haya terminado de ejecutarse, es razonable suponer que no se pueda ya acceder a la variable nombre. Dado que el código funciona como se esperaba, esto obviamente no es el caso.

La solución a este rompecabezas es que miFunc se ha convertido en un closure. Un closure es un tipo especial de objeto que combina dos cosas: una función, y el entorno en que se creó esa función. El entorno está formado por las variables locales que estaban dentro del alcance en el momento que se creó el closure. En este caso, miFunc es un closure que incorpora tanto la función muestraNombre como el string “Mozilla” que existían cuando se creó el closure.

Este es un ejemplo un poco más interesante parecido al que muestra el profe : una función creaSumador:

function creaSumador(x) {
  return function(y) {
    return x + y;
  };
}

var suma5 = creaSumador(5);
var suma10 = creaSumador(10);

console.log(suma5(2));  // muestra 7
console.log(suma10(2)); // muestra 12 

En este ejemplo, hemos definido una función creaSumador(x) que toma un argumento único x y devuelve una nueva función. Esa nueva función toma un único argumento y, devolviendo la suma de x + y.

En esencia, creaSumador es una fábrica de función: crea funciones que pueden sumar un valor específico a su argumento. En el ejemplo anterior utilizamos nuestra fábrica de función para crear dos nuevas funciones: una que agrega 5 a su argumento y otra que agrega 10.

suma5 y suma10 son ambos closures. Comparten la misma definición de cuerpo de función, pero almacenan diferentes entornos. En el entorno suma5, x es 5. En lo que respecta a suma10, x es 10.

Un componente de orden superior (HOC por las siglas en inglés de higher-order component) es una técnica avanzada en React para el reuso de la lógica de componentes. Los HOCs no son parte de la API de React. Son un patrón que surge de la naturaleza composicional de React.


En concreto, un componente de orden superior es una función que recibe un componente y devuelve un nuevo componente.


Mientras que un componente transforma props en interfaz de usuario, un componente de orden superior transforma un componente en otro.


Esto lo extraje de la documentación oficial de react.js, si no les queda muy claro algún concepto les recomiendo leerla es verdaderamente útil.

uff i’m very exciting with this course

Este concepto de verdad me gusto mucho, hay que aprenderlo a manejar pero yo creo q debe haber un consenso y una documentación por que puede llegar hacer inmanejable pasando esos parámetros

Gracias kotlin por presentarme la programación funcional de ante mano 😄

Los H.O.C me hacen acordar inevitablemente a los decorators de python 🤨

Entonces se podría decir que son lo mismo que los closures? 🤔