Qué es composición de componentes y colocación del estado

3/19
Recursos

Aportes 34

Preguntas 6

Ordenar por:

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

💏 Todxs en el Curso de Introducción a React:
¡Woooooo! ¡React Context es una maravilla! ¡Nos encanta! ¡Aleluya! 🙌
👨‍🏫 Juan en el Curso de Patrones de Render:
¡Te reto a NO usar React Context! 😈

Ahora tengo miedo de cómo vayan a reaccionar con esta clase. 😰

REACT CONTEXT

Les dejo los cursos de Richard god

https://platzi.com/p/richard/

Su curso de react 2019 te ayuda bastante a comprender las bases teoricas y practicas de react

Un componente en React está conformado por elementos que son etiquetas HTML, estos componentes pueden ser solo estéticos(stateless) o pueden ser interactivos(stateful). Para que los componentes interactivos respondan y hagan una algo podemos programar todo lo que hace dentro de él o, en otro caso, si lo que hace depende de otro componente, entonces tenemos que poder recibir estos datos de alguna manera.
Para enviar datos de un componente a otro usamos props que viajan desde el componente más arriba en la anidación hasta el componente objetivo, por el camino estas props pueden pasar por componentes que no las van a usar o simplemente son stateless( solo estéticos ), esto puede afectar el rendimiento y es un poco enredado. Para evitar esto tenemos 2 formas el contexto y la composición de componentes.
El contexto hace que el componente que tiene que recibir la información la reciba directo del que la envía( es como una relación uno a muchos ) Lo malo del contexto es que añade un poco de complejidad a nuestro código.
La forma recomendada por React es la Composición de Componentes. Según el modelo atómico: cuando agrupamos varios componentes tenemos moléculas y luego si agrupamos varias de estas tenemos organismos y así hasta construir templates y páginas. Entonces sí tomas todos los componentes de tu app y los traes al componente App, todos en un solo archivo con sus correspondientes anidaciones y jerarquías, tendríamos una composición de componente enorme, pero si además escribes los estados y se los pasas a los componentes que los necesitan, estaríamos logrando lo que queríamos hacer.
Un archivo con una composición de componentes tan grande es complicado de entender, por esa razón en función de las necesidades de mi app haría composición de componentes en el nivel organismo y luego en función de la cantidad de organismos que tenga vuelvo a hacer composición de componentes en el nivel template y así sucesivamente hasta llegar al componente App con una composición de componentes de muchas Pages (dado el caso)
Incluso haciendo esto necesitaría usar Contexto entre composiciones para evitar el uso de props (aunque no es malo usarlas cuando su trayecto es corto). La implementación es muy relativa pero sin duda la composición de componentes juega un papel fundamental en la construcción de UI con React.

3.-¿Qué es composición de componentes y colocación del estado?

.
Es un patrón para crear componentes que nos da libertad para elegir dónde y cómo usamos nuestros componentes. Cada componente debe cumplir una tarea muy específica pero no debe de decirnos exactamente como usar esa solución que nos provee, debe ser muy flexible dándonos libertad para usar la información como queramos.

Esto nos permite hacer a los componentes más fáciles de integrar al resto de componentes, y agiliza el proceso de reutilizar o hacer cambios en los componentes.
.
Colocación del estado

¿Dónde los guardamos? Este problema también se conoce como state colocation.

  • Máxima cercanía a la relevancia: El estado debe estar tan cerca como sea posible de donde lo estemos usando y actualizando.
  • Stateful vs stateless: Separar lógica y estado de componentes que manejan UI.

.
Ir de lo grande a lo específico.
.
Hay que examinar que componentes manejan su propio estado, asumiendo que todos los componentes consumen el estado general de la app queremos encontrar a los componentes que crean un estado aparte del general. De esta manera podemos dividir componentes, de un lado tendremos a los componentes que solo consumen el estado general de la app y esos son componentes stateless(de interfaz, de UI), y del otro lado a los componentes que crean su propio código interno (estado) serán los stateful y siguiendo el principio de separar al estado de la UI podemos dividir a estos componentes con su propio estado en 2 uno stateful, y el otro en stateless.

Grande Richard Kaufman!!!

jasdjasdj que crack richard!!!

Esta clase la necesite hace tres meses jajajajajajaja

Para armar tu aplicación de forma correcta necesitas primero pensar en la mínima cantidad de estado mutable que necesita la aplicación. Lo importante acá es que no te repitas (DRY: Don’t Repeat Yourself). Necesitas descubrir la mínima representación del estado que tu aplicación va a necesitar y calcular el resto bajo demanda.

Hazte estas tres preguntas por cada pieza de información:

  1. ¿Viene del padre como props? Entonces probablemente no sea estado.
  2. ¿Se queda sin cambios con el tiempo? Entonces, probablemente no sea estado.
    ¿Puedes calcularlo con base a otro estado o prop en tu componente? Entonces, no es parte del estado.

De esta manera podrás identificar de forma correcta tus estados.


Esta clase es increible, tuve que verla 3 veces para comprender bien todo, pero sin duda hace mucho mas legible la comunicacion entre los componentes.

Richard Kauffman es mi pastor, nada me faltará.

Creo que esta clase es la que estaba buscando, lo que me enredaba era justamente como entender toda la comunicación de los componentes entre archivos y usando context, se nota mucho mas claro todo con composición 😄

Considero que el contexto puede resultar útil cuando cuentas con varias “páginas”.
Por ejemplo: Si tuviéramos varias páginas que puedan acceder a los todos e inclusive modificarlos (como una página donde el usuario vea el historial de todos completados) podría ser mejor compartir esos todos a través del contexto (e inclusive guardarlos en el localStorage para que no se pierdan al recargar).

alabado sea Richard y su curso de react hook

Juan: 3000 lineas de Código en un mismo archivo no puede ser.

mi antiguo trabajo: Hold my beer

Me está gustando estos nuevos cursos de platzi que hacen que sus cursos conversen entre ellos. Alta cohesión pero bajo acoplamiento es la tónica platzi!

Me sentí como el Capi Perez jajaja

Excelente video!!!
Aquí les dejo un artículo/post que realice sobre la composición de componentes.
Clic aquí

Espero les guste!

Si se envia parametros a un componente el cual usara estos parametros para enviarlo a otro componente hijo en é, es recomendable usar su porps Children y hacer la composicion de componentes, en cambio si se envia parametros al compoente hijo para que usa estos parametros en su logica sin enviarle a un compoennte hijo dentro de él, entocens se le envia el parametro directamente sin Children, obviamente todo es relativo pero tenerlo en cuenta ayuda a optimizar el código. Ademas entiendo que la componentizacion ayuda a mejorar el rendiemiento por el virtual dom y la comparacion de nodos al volver a renderizar cambios.

🥷 Qué es composición de componentes y colocación del estado

Apuntes

  • La Composición de componentes indica que cada componente debe darnos mucha libertad para elegir donde y como usarlo
  • Cada componente debe realizar una tarea en específica, pero no debe de decirnos como usar esa solución que nos brinda, debe de ser flexible al momento de utilizarlo
    • Nos permitirá
      1. Tener componentes mucho más fáciles de integrar al resto de componentes
      2. Nos facilitará reutilizar o hacer cambios en nuestros componentes

Ejemplo

Una solución para renderizar una tarea podría ser este componente

const App = () => (
	<TodoList todos={todos} />
);
const TodoList = ({todos}) => (
	<section>
		{todos.map(todo => (
			<TodoItem {...todo} />
		))}
	</section>
)

Existe otra forma de realizar esta tarea, y es que el componente App tenga también la tarea de renderizar cada tarea, esta manera nos dará mayor flexibilidad con el componente de TodoList

const TodoList = ({children}) => (
	<section>
		{children}
	</section>
)
const App = () => (
	<TodoList>
		{todos.map(todo => (
			<TodoItem {...todo} />
		))}
	</TodoList>
);

Colocación del estado

¿Dónde va tu estado?

  • Máxima cercanía a la relevancia
    • El estado ira según al área donde se aplique el mismo
  • Stateful vs. stateless
    • Se refiere a no tener revuelo entre componentes que manejan lógica y estado con los componentes que solo renderizan elementos

Se puede usar ambos principios siempre si los entendemos muy bien

Pensar en lo más grande y poco a poco ir a lo más especifico

¿Necesitas React Context?

Al usar composición de componentes puede ser una alternativa interesante en caso de que el árbol de componentes no sea demasiado profundo.

Ventajas

  • No será necesario pasar props por cada componente intermedio entre donde se encuentre el dato inicialmente hasta su destino
  • Podrás entender la aplicación con entender lo que está pasando en un archivo

Ejemplo

const App = () => {
	const [state, setState] = useState();
	return (
		<>
			<TodoHeader>
				<TodoCounter />
				<TodoSearch onSearch={setState} />
			</TodoHeader>
			<TodoList>
				{state.todos.map(todo => <TodoItem {...todo} {...state} />)}
			</TodoList>
		</>
	);
}

Puedes observar que el componente se puede comunicar sin mucha complicación directamente con sus componentes hijos, nietos o incluso bisnietos.

  • De esta manera se está reduciendo la complejidad de los componentes intermedios
  • Además que se puede observar legibilidad con solo ver un archivo
  • Pero esta manera es insostenible en el caso que el árbol de componentes sea muy grande, pero aún se puede utilizar composición de componentes al utilizar React context
pues, asumo que la manera de pasar información desde **AppUI** hasta **TodoItem** por ejemplo, sería que estén en el mismo archivo, no? \ Eso es lo que asumo si no se puede utilizar una especie de estado global, no se

creo que esto seria un buen ejemplo

en mi anterior trabajo habia archivos de 5000 lineas de codigo y no existia composicion… Era horrible

Buenas, recomiendo leer la documentación de como pensar en React si sientes que te está faltando algo. Eso hice yo y la verdad está muuuuy completa B).

Definición Composición de Componentes

Colocación del Estado

A principios de año comence un proyecto bastante grande en react sin conocer React Context. Ironicamente, el reto para mi es al revez jajaja
Creo que esta sintxis se llama ** State Drilling**

Principios podemos seguir para decidir dónde colocar nuestro estado:

  • Máxima cercanía a la relevancia y stateful vs. stateless components.
El Estado debe estar definido en el componente que lo va a acceder o en el padre más cercano que englobe los componentes que necesiten accederlo

Composición de componentes: usar mas la prop children para implementar el código de los componentes hijos y la declaración de los componentes nietos desde el propio componente padre.

Esto haria tener un componente padre stateless algo mas grande, pero toda una composicion de componentes mas facil de modificar. Si es necesario mas niveles de composición. siempre se pueden crear nuevas secciones creando un nuevo componente padre (nieto) con sus propios componentes hijos y nietos respectivamente. Asi no tener tantos componentes de distintos niveles en un mismo componente.

Usando este patron se dejarán de crear contextos para luego obtener sus valores en componentes descendientes con useContext o pasar estados/funciones por props.

Tuve que ver la clase 2 veces, pero sin duda muy buena explicación 😃

🤯 Impresionante este tema!