React

Rendimiento de los componentes funcionales en React

El compromiso del equipo de React, desde la aparición de los componentes funcionales, siempre ha sido hacer que estos fueran más eficientes que los componentes basados en clases. De hecho, si le preguntas a cualquier desarrollador que use React, seguro que afirma convencido que son mucho más rápido y eficientes, aunque la realidad es que, en el momento de escribir estas líneas, apenas existe una diferencia de segundos entre componentes funcionales y componentes basados en clases.

Reconciliación y algoritmo diferencial en React

Si has usado React para desarrollar aplicaciones web seguro que ya sabes que cuando un componente es modificado, ésta biblioteca de código de Javascript crea un DOM virtual para compararlo con el DOM actual y, de este modo, calcular si es necesario actualizarlo. A este proceso de actualizar el DOM actual cuando es necesario, para mantenerlo sincronizado con el DOM virtual, se le llama Reconciliación. Si usáramos un algoritmo de vanguardia para calcular el número mínimo de operaciones necesarias para transformar un árbol de nodos como el DOM en otro, la complejidad sería del orden de O(n³), donde n es el número de elementos en el árbol.

Ionic React

Ya sabes que Ionic se integra perfectamente con los tres principales frameworks de front en el momento de escribir este artículo, Angular, React y, recientemente, con Vue.js. Centrándonos en Ionic React, habría que destacar varios aspectos. En definitiva se trata de React, y esto significa que usa los estándares abiertos de la web y las capacidades integradas en los navegadores, por tanto es compatible com millones de bibliotecas de código web.

State en React

Ya has visto como configurar componentes con props en React, pero ¿cómo puedes definir comportamientos o interacciones con dichos componentes? Para ello necesitas que los componentes puedan definir su estado, y con las props es imposible, pues no pueden ser modificadas por el componente, sólo por su componente padre. Para esto existe this.state, donde los componentes pueden disponer de datos privados modificables a traves de la función this.setState(). Ya sabes que función usar para ajustar this.