No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Qu茅 son las render props y render functions

8/19
Recursos

Aportes 11

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Antes de estudiar las render props debes conocer la composici贸n de componentes. Las renders props vienen a ayudar a hacer una composici贸n de componentes m谩s limpia. Seguimos con todas las ventajas de usar composici贸n de componentes.
A partir de ahora podemos decir que tenemos 2 tipos de props: las props normales que reciben un valor o variable y por otro lado tenemos las props que contienen una funci贸n. Estas que contienen una funci贸n son las que nos interesan.
Esta funci贸n devuelve un componente o un elemento que pudiera tener anidados m谩s elementos y componentes.
La sintaxis es la siguiente:

<MyHeader 
	render={ () => <myLogo type={ type } /> } 
/> 

La propiedad render(la cual puede tener cualquier otro nombre) es nuestra render prop, porque contiene una funci贸n que al ser llamada devuelve un componente. Entonces cumple todas las condiciones y solo falta llamarla desde el componente que la contiene:

function MyHeader( props ){
	return (
	<header className="header__styles">
		{ props.render() }
	</header>
	)
} 

Entonces podemos interpretar que las render props le dicen al componentes que renderizan(cual va a ser su contenido)

Otra forma de hacer esto es con las render functions y lo que cambia es que se declaran dentro del componente:

<MyHeader>
	{ () => <myLogo type={ type } /> } 
</MyHeader>

Y para acceder a lo que est谩 dentro del componentes simplemente usamos props.children:

function MyHeader( props ){
	return (
	<header className="header__styles">
		{ props.children }
	</header>
	)
} 

Es pr谩cticamente lo que hicimos con la composici贸n de componentes y la propiedad children.
隆Usen render props y mejoren sus composiciones amigos 馃槂 !

8.-Qu茅 son las render props y render functions


Nos ayudan a elevar nuestra composici贸n de componentes a otro nivel.


Las render props nos permiten ser m谩s espec铆ficos sobre que vamos a renderizar, cuando y donde vamos a renderizar cada parte del contenido de nuestros componentes.


Render Function


Es el patr贸n de entregar la informaci贸n de nuestro componente en una funci贸n. No es exclusivo de react context, nosotros podemos crear nuestros propios componentes que usen este patr贸n, que reciban una funci贸n para que le podamos enviar la informaci贸n que queremos proveer y luego si, renderizar los componentes que ya tienen la info gracias a la funci贸n.


Render Props


Cuando ya no mandamos la funci贸n dentro del componente, si no que la enviamos en alguna otra propiedad del componente. Podemos jugar con este patr贸n para que compartir informaci贸n sea m谩s divertido.

un aporte para conocer m谩s este patr贸n de render props
https://osmancea.medium.com/entendiendo-render-props-en-react-dfe22f84f593

Render Props

Documentaci贸n oficial:
https://es.reactjs.org/docs/render-props.html

Qu茅 son las render props y render functions

.
Los componentes provider y consumer: por dentro del componente consumer podemos recibir una funci贸n con todas las propiedades que hab铆amos guardado en el provider y que quer铆amos compartir en toda la aplicaci贸n ese patron de entregar la informaci贸n de nuestro componente en una funci贸n, es lo que nosotros llamamos una render function.

<Provider value={...something}>
	<Consumer>
		{something => (
			<TusComponentes
				{...something.xyz}
			>	
		)}
	</Consumer>
</Provider>

.

Render props:

Cuando la funci贸n ya no la enviamos dentro del componente en su propiedad { children } sino que la enviamos en alguna otra propiedad del componente, puede ser cualquiera, se puede jugar mucho con ese patron para que compartir informaci贸n y hacer composici贸n de componentes sea mas divertido.

<RenderProps
  renderProp={<OtroCompo />}
/>

<RenderProps
  renderProp={info => <OtroCompo {...info} />}
/>

Ejemplo:

<PlatziCourse
  classes={platziClass => (
    <PlatziClassPreview {...platziClass} />
  )}

  lastActivity={question => (
    <PlatziComment q={true} {...question} />
  )}
/>

Opino que con las render props se lee mucho mejor el c贸digo (con tal de que se manejen buenos nombres de las props).

馃對锔 Render Props y Render Functions

Ideas/conceptos claves

Render Function El patr贸n de entregar la informaci贸n en una funci贸n es lo que llamamos

Render Prop El patr贸n de enviar como propiedad una funci贸n

Apuntes

  • Son un patr贸n que nos ayudan a llevar la composici贸n de componentes a un mayor nivel
  • Render Props nos dejan especificar:
    • Que vamos a renderizar
    • Cuando lo vamos a renderizar
    • Donde lo vamos a renderizar
<Provider>
	<Consumer>
		{ something => (
				<TusComponentes
					{...something.xyz}
				/>
		)}
	</Consumer>
</Provider>
  • React context se puede utilizar a trav茅s de los componentes de Provider y Consumer
    • Con el componente consumer pod铆amos recibir una funci贸n con todas las propiedades que hab铆amos guardado en el provider, el concepto de esta aplicaci贸n es **Render Function**
  • Tambi茅n podemos realizar el siguiente c贸digo la cual utiliza Render Props
<RenderProps
	renderProp={<OtroCompo />}
/>

<RenderProps
	renderProp={info => <OtroCompo {...info} />}
/>

Por ejemplo podr铆amos realizar la siguiente aplicaci贸n

<PlatziCourse
	classes={platziClass => (
		<PlatziClassPreview {...platziClass} />
	)}
	lastActivity={question => (
		<PlatziComment q={true} {...question} />
	)}
/>

Voy a repasar esto muy bien para entenderlo.

una render prop es una prop que recibe una funci贸n que un componente utiliza para saber qu茅 renderizar.

<PlatziClasses
	latestClasses = {(studentClasses) => (
		<LastClassContainer>
			{
				studentClasses.map((scItem) => (
					<LastClassItem {...scItem} />
				))
			}
		</LastClassContainer>
	)}
	rutasEscuelas = {
		(studentRutasEscuelas) => (
			<>
				{
				studentRutasEscuelas.map((rsItem) => (
						<RutaEscuelaItem {...rsItem} />
					))
				}
			</>
		)
	}	
/>

En cada render prop, cuando estemos devolviendo esa nueva funci贸n, tenemos que definir un componente especifico para esa parte de la maquetaci贸n y de esta manera evitar usar React Context. Simplemente recibimos esa funci贸n e inyectamos las propiedades al componente