React [45,88,89,90] es una librería que facilita el desarrollo deinterfaces gráficas de usuario (GUIs). Cabe destacar que se trata de una pequeña librería, y puesto que carece de las herra-
mientas que serían de esperar en lo que clásicamente se entiende porframework, en ningún
caso puede considerarse una solución completa para el desarrollofrontend. Caso aparte sería
si hablásemos deReact stack.
React nació con el objetivo de facilitar el manejo de interfaces de usuario complejas, en frontends, y uno de los principales problemas de los que se ocupa es de cómo gestionar los cambios en las vistas en respuesta a cambios en los datos. La librería posee un estilo declara-
tivo, mediante el cual los desarrolladores escribenqué hacery nuncacómo hacerlo paso a paso
(estilo imperativo). La principal baza para elegir un estilo declarativo es que, para un humano, el código así escrito es más fácil de leer y comprender.
React es una librería muy rápida porque abraza el hecho de que generar elementos en memoria es muy rápido. La mayor pérdida de velocidad se produciría al renderizar en el DOM. Afortunadamente, encontraron la solución en un buen algoritmo.
La arquitectura de React es una arquitectura basada en componentes [91], que fomenta
un bajo acoplamiento y la reutilización de código.
Esta librería diferencia entre elementos y componentes:
• Elementos React B.1: Son los bloques, esenciales, de construcción de una aplicación
React. No se debe confundir, en ningún momento, los conceptos de elemento y compo- nente. Un elemento describe lo que se ve en la pantalla, es inmutable y no es habitual que sea usado directamente. Lo más normal es que los elementos sean retornados desde los componentes.
• Componentes ReactB.2: Son pequeños trozos reutilizables de código, que retornan un
1 const element = <h1>Segmentation fault (coredumped)</h1>; Listing B.1: Elemento React
1 function ParseError(props) {
2 return <h1>Parse error before {props.error}</h1>; 3 }
Listing B.2: Componente React
React considera las interfaces de usuario como funciones. Existen dos tipos de componen- tes en React: con estado y sin estado. Los componentes sin estado se escriben como simples funciones JavaScript, que retornan un elemento React. Los componentes con estado se escri- ben como clases JavaScript. De todas formas, no debemos olvidarnos que, hasta ECMAScript 6, no existían clases, y estas eran implementadas como funciones. Esto es, las clases en JavaS- cript pueden verse casi como azúcar sintáctico o un guiño a la orientación a objetos.
Esta librería se aleja de la clásica separación de datos, estilo (CSS), estructura (HTML) e interacciones dinámicas (JavaScript). En su lugar, adopta un enfoque basado en la construc- ción de componentes de interfaz de usuario, reusables y escritos en JavaScript. Como es obvio, cada componente ha de estar ligado a una funcionalidad. La idea central es construir una GUI mediante la composición de componentes (bloques de funcionalidad autocontenidos). Este enfoque permite crear GUIs que son fáciles de mantener y de extender. Actualmente, no tie- ne mucho sentido separar HTML de JavaScript, puesto que están íntimamente relacionados, sobre todo en el caso de aplicaciones de página única.
Un componente React es el caso más claro deone-way data flow. El componente siempre
recibe unos determinados datos de entrada y retorna lo que le diga su métodorender()que
hay que mostrar. Para las mismas entradas, debería retornar las mismas salidas. Los datos de
entrada se introducen en el componente víapropsy, precisamente por medio de estasprops,
pueden ser accedidos desde la funciónrender(). Lo que debería quedar claro es que lo que
React denominapropsno es otra cosa que las entradas arbitrarias que recibe un componente.
Laspropsson datos, de solo lectura, pasados desde un componente padre a un componente
hijo. Cabe destacar que, al afirmar que son de solo lectura, estamos indicando que no deben ser modificadas en modo alguno. Las propiedades susceptibles de modificación deberían es- tar ubicadas en el estado del componente (this.state), gestionado por él mismo. Finalmente,
comentar queprops.childrenalberga todo el contenido situado entre la etiqueta de apertura y
cierre de un componente.
Una interfaz de usuario React es un árbol jerárquico de componentes. Los padres pueden
comunicar su estado a los hijos haciendo uso de lasprops, mencionadas anteriormente. Pero
pasar a un hijo una función mediante unaprop. Cuando el hijo invoque dicha función, el padre recibirá el valor de retorno.
Lo normal en una aplicación React es que los datos se pasen de padre a hijo, como acaba-
mos de describir, a través deprops. No obstante, existe una forma de saltarse esta limitación,
denominadaContext.Context nos permite que los datos circulen a través del árbol de com-
ponentes sin pasar comoprops por cada nivel.Context solo es adecuado para datos que se
consideran globales al árbol de componentes, pongamos, por ejemplo, el tema de la interfaz de usuario.
Además de los componentes “estándar”, existen otro tipo de componentes, denominados
componentes de orden superior oHOC. Un componente “estándar” recibe unas determinadas
props y retorna interfaz de usuario. Un HOC es una función que recibe un componente y
devuelve otro componente. Por tanto, los componentes de orden superior son un patrón, que surge de la naturaleza composicional de React, y que permiten reutilizar lógica.
Todo componente React tiene un ciclo de vida. La librería nos proporciona un conjunto de métodos que podemos reescribir para establecer lo que pasa en cada fase del ciclo. Esto es, ¿qué pasa cuando el componente se carga? ¿qué se hace cuando se descarga?, etc.
Cuando usamos React, también es frecuente recurrir a la sintaxis JSX. Aunque no es para nada obligatorio. Esto no es otra cosa que escribir JavaScript como HTML.
Una de las características que más resaltan de React es su uso de un DOM virtual. La
librería emplea este DOM virtual para encontrar las diferencias entre lo que se muestra, ac-
tualmente, en el navegador y la nueva vista. Estas diferencias se denominandeltay el proceso
se llama bien DOM diffing, bienReconciliación entre el estado y la vista (c.f.B.2) [92][93]. Y
… ¿qué ventaja tiene esto? Pues, fundamentalmente, que el desarrollador únicamente tiene que preocuparse de actualizar el estado de sus componentes. Luego, React ya se ocupará de actualizar la vista de la forma más conveniente. Cabe destacar que, como buen algoritmo de
diff que implementa, la librería solo actualizará las partes de la UI que procedan.
Otra característica destacable es la abstracción, que hace la librería, del DOM, proporcio- nando propiedades y eventos sintéticos. Esto es, no se trabaja con eventos nativos. En su lugar, se utilizan eventos sintéticos que envuelven a los eventos nativos. La ventaja de esta solución es que obtenemos el mismo comportamiento independientemente del navegador en el que se ejecute la aplicación.
Finalmente, comentaremos que en React todo componente admite el atributo especialRef.
Este atributo permite tener acceso directo al elemento del DOM o a la instancia del compo- nente, según proceda.
DOM Virtual de React: Componentes afectados por
cambio de estado
DOM real
Nodo DOM DOM Virtual de React
Componente React Elemento React Nodo React 1 - Renderizar 2 - Modificar estado 3- Algoritmo de reconciliación de vista y estado 4 - Re-renderizar solo componentes afectados DOM real Nodo DOM
Figura B.2: Funcionamiento del DOM virtual de React