Hola, soy un novato en la biblioteca React. Tomé algunas clases de reacción y ya implementé algunos mini proyectos de reacción.
Ahora creo que sé cómo escribir códigos de reacción 'funcionales'.
Quiero saber cómo puedo mantener mis componentes pequeños y simples . ¿Hay buenas prácticas para esto?
Digamos que hay un componente principal A y componentes secundarios B , C y D Todos ellos tienen algunos estados y botones compartidos .
Cuando implemento este tipo de componentes, hice muchos estados y controladores en el componente A y los pasé a través de props a B , C , D .
Escuché que la gente dice que mantener los componentes pequeños es una buena práctica.
Quiero saber cómo mantener el componente pequeño cuando hay muchos componentes secundarios y estados compartidos entre ellos. ¿No necesitamos muchos estados y controladores en el componente A ? No creo que esto sea sencillo. Se volverá más complicado a medida que aumente la cantidad de componentes secundarios.
Te agradecería que me dieras algunos consejos :)
En términos generales, su ejemplo está bien. Debería intentar crear componentes 'tontos' y reutilizables siempre que sea posible, y luego hacer que los componentes lógicos/con estado pasen datos a estos. Idealmente, coloque el estado/lógica lo más abajo posible en la cadena, pero lo suficientemente alto como para que todos los componentes que lo necesiten puedan acceder a él. Esta es una de las ideas centrales de React llamada levantar el estado .
tome, por ejemplo, un componente <Button> : podría pasar un nombre de ruta y tener lógica dentro del componente de botón para navegar a esa página, pero ¿qué sucede si luego necesita un botón que no cambia de página? idealmente, solo desea pasar una función onClick que le dice al botón qué hacer.
para usar su ejemplo, el componente A puede contener esta lógica onClick y pasarla al botón del componente B. Pero está bien, de esta manera el botón aún se puede reutilizar en otros lugares.
A medida que su aplicación crece en tamaño, es posible que desee comenzar a buscar en la API de contexto y luego en herramientas de administración de estado como redux (o el kit de herramientas Redux más simple): este tipo de herramientas hacen posible acceder al estado sin tener que pasarlo necesariamente. a través de accesorios. Sin embargo, no necesitarías algo como esto para tu ejemplo.
TL;DR: el ejemplo está bien, desea mantener la mayoría de los componentes simples/pequeños/tontos. También tendrá una serie de componentes que se ocupan de la lógica/estado y eso está totalmente bien.