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

3/19
Recursos

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

Aportes 11

Preguntas 4

Ordenar por:

💏 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. 😰

jasdjasdj que crack richard!!!

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.

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

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).

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.

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.


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.

alabado sea Richard y su curso de react hook

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 😄

Grande Richard Kaufman!!!