¿Cuáles son las principales (y más prácticas) ventajas de ReactJS?

Como comentábamos en nuestro post ¿Por qué tiene tanto éxito la librería React?, ReactJS (tambien conocido como React.js o, sencillamente, React) es básicamente una librería con la que podremos crear aplicaciones web en Javascript, tanto del lado del cliente como del servidor, siendo esto una de las principales características de la librería. En este artículo, repasamos las  principales características y ventajas de ReactJS.

Composición de componentes

En ReactJS podremos pasar funciones como parámetros, algo también conocido con el nombre de composición funcional. Las aplicaciones se elaboran con la composición de varios componentes y que encapsulan un comportamiento, una vista y un estado. La complejidad de estos no debe preocuparnos porque el comportamiento reside dentro de cada uno de ellos y al final la aplicación será un conjunto de componentes que trabajan entre sí.

Facilidad de mantenimiento, depuración y  escalabilidad son sólo algunas de las ventajas que podemos encontrar en esta forma de trabajar.

Desarrollo Declarativo vs. Imperativo

Con otras librerías, como jQuery, o Vanilla Javascript, el tipo de programación que utilizamos es imperativo. Se crean scripts que tienen que informar en el DOM qué debe de realizar o cómo debe de actuar. Esta forma de declarar hace que tengamos que escribir mucho código y a la larga un engorro a la hora de mantenerlo.

El que utiliza React es más declarativo, porque contamos con un estado de la aplicación y sus componentes responden ante la variación de ese estado. Cuando cambiamos las propiedades de los componentes se produce un cambio en su funcionalidad.

Flujo de datos unidireccional

Ese patrón de funcionamiento que posee React hace que los componentes superiores propaguen los datos a los que están en un orden inferior, estos trabajarán con esos datos y cuando cambian su estado envían los eventos hacia los de orden superior para actualizarse.

Aunque el flujo suele ser unidireccional, en ocasiones podemos hacerlo bidireccional por comodidad, pero recuerda que si lo mantenemos unidireccional, el mantenimiento de la aplicación será mucho más sencillo.

Rendimiento gracias al DOM Virtual

Las operaciones que realiza React, cuando se ejecutan las aplicaciones, son mucho más rápidas porque se realizan antes sobre el DOM Virtual, que cargado en memoria, permite actualizaciones de hasta 60 frames por segundo, dando como resultado una sensación de fluidez impresionante.

Isomorfismo

También conocido como Javascript Universal, es la capacidad de ejecutar el código tanto en el cliente como el servidor, solucionando problemas de posicionamiento tradicionales.

Elementos y JSX

El código que embebemos con ReactJS dentro de Javascript, es JSX, aunque tenga apariencia HTML, es decir, utilizamos una sintaxis propia y el resultado son elementos en memoria y no DOM tradicional.
Sin intervención por nuestra parte, los encargados en convertir los elementos devueltos por JSX en DOM Real, son React DOM y la herramienta de diffing.

Componentes con y sin estado

Los que no tienen estado se llaman stateless y son los componentes que no guardan datos en su memoria, pudiéndose escribir una pequeña función que devuelve el JSX.

Los que pueden guardar un estado se les llama statefull. La diferencia respecto a los anteriores es que en su código se escribe por medio de una clase ES6 (Javascript con ECMAScript 2015, como puedes ver en el artículo ¿Qué es ECMAScript 6 (ES6)? ) y en la que podemos disponer de atributos y métodos para realizar todo tipo de operaciones.

Ciclo de vida de los componentes

React añade un método que se activa cuando pasan cosas frecuentes en un componente y que permite suscribir acciones cuando se provoca una inicialización, se obtiene la devolución de una promesa, etc.

Después de tanta teoría, en próximos artículos profundizaremos en el uso de ReactJS desde un punto de vista más práctico. ¡Permanece atento a nuestro blog!

Compartir

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *