Biblioteca de componentes React
Una vez alguien más experimentado me dijo que no debería crear muchos componentes react, porque afectaría a mi rendimiento de forma negativa. Pero a medida que voy estudiando más a fondo React, me he dado cuenta de que la creación de componentes separados evita que se vuelvan a renderizar otros componentes si el estado de uno de ellos cambia. Entonces, ¿cómo debo seguir?
Y como dijiste, el rendimiento probablemente se vería afectado, porque cada cambio de estado resulta en un re-renderizado de toda la aplicación – lo que rompe toda la idea de las aplicaciones de una sola página. Por lo tanto, escribir componentes personalizados nos permite resolver estos problemas.
Sin embargo, hay que recordar que dividir un solo componente en múltiples componentes es lo que se llama “abstracción” y cada abstracción tiene un coste (puedes leer esto para más https://kentcdodds.com/blog/aha-programming#aha-), y tienes que ser consciente de ese coste y de los beneficios antes de dar el paso.
No creo que el consejo sea exactamente correcto. Cuando creamos un componente renderizado, React crea un DOM virtual para su árbol de elementos en el componente. Ahora, cada vez que el estado del componente cambia, React recrea el árbol DOM virtual y compara el resultado con el renderizado anterior
¿Qué son los componentes en React?
Los componentes son trozos de código independientes y reutilizables. Sirven para el mismo propósito que las funciones de JavaScript, pero funcionan de forma aislada y devuelven HTML. Los componentes vienen en dos tipos, componentes de clase y componentes de función, en este tutorial nos concentraremos en los componentes de función.
¿Cuál es la diferencia entre estado y utilería?
Los accesorios se utilizan para pasar datos de un componente a otro. El estado es un almacenamiento de datos local que es sólo para el componente y no puede ser pasado a otros componentes. La propiedad this. setState se utiliza para actualizar los valores de estado en el componente.
¿Por qué creamos componentes en React?
Un componente es uno de los bloques de construcción principales de React. En otras palabras, podemos decir que cada aplicación que desarrolles en React estará formada por piezas llamadas componentes. Los componentes hacen la tarea de construir UIs mucho más fácil.
Constructor de componentes React
React: Cómo crear un componente Los componentes son una parte esencial de cualquier aplicación React. En este post, aprenderemos a crear componentes para hacer lo que queramos.Piensa en los componentes como trozos del tamaño de un bocado de nuestra aplicación que podemos reutilizar en todo nuestro sitio. Imaginemos que estamos haciendo una red social y queremos poner un botón de “me gusta”, “compartir” y “comentar” debajo de cada post. Podríamos escribir el código para esto en cada área que queramos, pero esto es una molestia si lo mostramos en 6 lugares diferentes y necesitamos cambiarlo.Al crear un componente para esto, podemos escribir el código real una vez y simplemente soltarlo donde queramos.Creando un componente de clasePara crear un componente de clase, tendremos que darle un nombre. En el código siguiente, llamaremos a nuestro componente de clase “Ejemplo”. Todo nuestro código para el componente irá donde está la elipsis (“…”).// app.js
Eso fue bastante fácil. Hay que tener en cuenta que si se trata de un componente en un archivo propio, tendrá que ser exportado. Hay dos maneras de hacer esto. Podemos incluir “export default” antes de la instanciación de nuestra clase o podemos simplemente poner una línea después de la clase que la exporta. Los ejemplos de esto son los siguientes:// app.js
Componente de clase React vs componente funcional
Anidación de componentesLas aplicaciones suelen incluir más contenido que un solo componente. Puedes anidar los componentes React unos dentro de otros como lo harías con los elementos HTML normales.En tu ejemplo, crea un nuevo componente llamado HomePage:function Header() {
Árboles de componentesPuedes seguir anidando componentes React de esta manera para formar árboles de componentes.Por ejemplo, tu componente de nivel superior HomePage podría contener un componente Header, un Article y un Footer. Y cada uno de esos componentes podría tener a su vez sus propios componentes hijos y así sucesivamente. Por ejemplo, el componente Header podría contener un componente Logo, Title y Navigation.Este formato modular te permite reutilizar componentes en diferentes lugares dentro de tu aplicación.En tu proyecto, ya que <HomePage> es ahora tu componente de nivel superior, puedes pasarlo al método ReactDOM.render():function Header() {
Comando de creación de componentes de React
En este punto, nuestra aplicación es un monolito. Antes de que podamos hacer que haga cosas, tenemos que dividirla en componentes manejables y descriptivos. React no tiene reglas estrictas sobre lo que es y no es un componente – ¡eso depende de ti! En este artículo te mostraremos una forma sensata de dividir nuestra aplicación en componentes.
La segunda viñeta es especialmente valiosa: hacer un componente a partir de elementos comunes de la interfaz de usuario te permite cambiar tu código en un lugar y ver esos cambios en todos los lugares donde se utiliza ese componente. Tampoco es necesario dividir todo en componentes de inmediato. Tomemos el segundo punto como inspiración y hagamos un componente a partir de la pieza más reutilizada y más importante de la interfaz de usuario: un elemento de la lista de tareas.Hacer un <Todo />Antes de que podamos hacer un componente, debemos crear un nuevo archivo para él. De hecho, deberíamos crear un directorio sólo para nuestros componentes. Los siguientes comandos crean un directorio de componentes y, dentro de él, un archivo llamado Todo.js. Asegúrate de que estás en la raíz de tu aplicación antes de ejecutar estos comandos.
