Virtual DOM

Para monitorizar los cambios en los modelos y aplicarlos en el DOM (alias renderizar) tenemos que ser conscientes de dos cosas importantes:

1. Cuando los datos han cambiado.
2. Cuales elementos del DOM deben ser actualizados.

Para la detección de cambios (1) React utiliza un modelo observer en vez de dirty checking (comprobación continua de cambios en el modelo). Por eso no tiene que calcular que ha cambiado, lo sabe inmediatamente. Esto reduce los cálculos y hace la aplicación más fluida.

Para el desafío de cambiar el DOM (2) React construye la representación de árbol del DOM en memoria y calcula qué elemento DOM debe cambiar. La manipulación del DOM es costosa, y nos gustaría mantenerla al mínimo. Por suerte, React trata de realizar la menor cantidad de manipulación a los elementos DOM como sea posible. Dado que menos manipulaciones del DOM se pueden calcular más rápido, basandonos en la representación del objeto, los costos de los cambios al DOM se reducen bastante.

Component-driven development

En el desarrollo guiado por componentes, uno no ve todo el sitio en una plantilla.

Al principio probablemente un pensará que es un inconveniente. Pero más adelante uno reconoce el poder de pensar en piezas más pequeñas que trabajan con menos responsabilidad. Esto facilita las cosas para entender, mantener y cubrir con pruebas.

¿Cómo debería imaginarlo?

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

En primer lugar es aconsejable seguir el principio de responsabilidad única y lo ideal sería diseñar nuestros componentes para que sean responsables de sólo una cosa. Cuando empecemos a sentir que el componente no está cumpliendo con esto, debemos considerar dividirlo en partes más pequeñas.