React (software)

React se adhiere al paradigma de programación declarativa . ^{[ 15 ] [ 16 ] : 76} Los desarrolladores diseñan vistas para cada estado de una aplicación, y React actualiza y renderiza componentes cuando los datos cambian. Esto contrasta con la programación imperativa . ^{[ 17 ]}

El código de React está compuesto por entidades llamadas componentes . ^{[ 16 ] : 10–12} Estos componentes son modulares y pueden reutilizarse. ^{[ 16 ] : 70} Las aplicaciones de React suelen constar de muchas capas de componentes. Los componentes se renderizan en un elemento raíz del DOM utilizando la biblioteca React DOM. Al renderizar un componente, los valores se pasan entre componentes a través de props (abreviatura de "propiedades") . Los valores internos de un componente se denominan su estado. ^{[ 18 ]}

Las dos formas principales de declarar componentes en React son a través de componentes de función y componentes de clase. ^{[ 16 ] : 118 [ 19 ] : 10} Desde React v16.8, usar componentes de función es la forma recomendada.

Los componentes de función, anunciados en React Conf 2018 y disponibles desde React v16.8, se declaran con una función que acepta un único argumento "props" y devuelve JSX (JavaScript XML). Los componentes de función pueden usar el estado interno con el useStateHook. ^{[ 20 ]}

El 16 de febrero de 2019, se lanzó React 16.8 al público, introduciendo los React Hooks. ^{[ 20 ]} Los Hooks son funciones que permiten a los desarrolladores "engancharse" al estado y las características del ciclo de vida de React desde componentes funcionales. ^{[ 21 ]} Cabe destacar que los Hooks no funcionan dentro de las clases; permiten a los desarrolladores usar más características de React sin clases. ^{[ 22 ]}

React proporciona varios hooks integrados como useState, ^{[ 23 ] [ 19 ] : 37}useContext , ^{[ 16 ] : 11 [ 23 ] [ 19 ] : 12}useReducer , ^{[ 16 ] : 92 [ 23 ] [ 19 ] : 65–66} useMemo^{[ 16 ] : 154 [ 23 ] [ 19 ] : 162} y useEffect. ^{[ 24 ] [ 19 ] : 93–95} Otros están documentados en la Referencia de la API de Hooks. ^{[ 25 ] [ 16 ] : 62}useState y useEffect, que son los más utilizados, son para controlar ^el estado ^{[ 16 ] : 37} y los efectos secundarios , ^{[ 16 ] : 61} respectivamente.

Los componentes de servidor de React ( RSC ) ^{[ 28 ]} son ​​componentes funcionales que se ejecutan exclusivamente en el servidor. El concepto se introdujo por primera vez en la charla "Obtención de datos con componentes de servidor" ^{[ 29 ]} . Actualmente, los componentes de servidor se utilizan con mayor facilidad con Next.js. Con Next.js, es posible escribir componentes tanto para el servidor como para el cliente (navegador). Cuando el navegador recibe un componente renderizado por el servidor, React en el navegador toma el control, crea el DOM virtual y adjunta los manejadores de eventos. Esto se denomina hidratación ^{[ 30 ] .}

Aunque el concepto es similar al de la renderización del lado del servidor ( RSC), las RSC no envían el código JavaScript correspondiente al cliente, ya que no se produce hidratación. Por lo tanto, no tienen acceso a los hooks. Sin embargo, pueden ser funciones asíncronas , lo que les permite realizar operaciones asíncronas directamente:

función asíncrona MyComponent () {const mensaje = await fetchMessageFromDb ();devolver (< div > Mensaje : { mensaje }</ div >);}

Los componentes de clase se declaran utilizando clases ES6 . Se comportan de la misma manera que los componentes de función, pero en lugar de usar Hooks para gestionar el estado y los eventos del ciclo de vida, utilizan los métodos del ciclo de vida de la React.Componentclase base .

clase ParentComponent extiende React.Component {​​estado = { color : 'verde' };prestar () {devolver (< ChildComponent color = { this . state . color } />);}}

React no incluye soporte integrado para el enrutamiento . React es principalmente una biblioteca para la creación de interfaces de usuario y no ofrece una solución de enrutamiento completa de forma predeterminada. Se pueden usar bibliotecas de terceros para gestionar el enrutamiento en aplicaciones React, como React Router. ^{[ 31 ]} Permite al desarrollador definir rutas, gestionar la navegación y manejar los cambios de URL de una manera compatible con React.

Otra característica destacable es el uso de un Modelo de Objeto de Documento virtual , o DOM virtual . React crea una estructura de datos en memoria , similar al DOM del navegador. Cada vez que se renderizan componentes, el resultado se compara con el DOM virtual. Luego, actualiza el DOM mostrado en el navegador de manera eficiente con solo las diferencias calculadas. ^{[ 32 ]} Este proceso se denomina reconciliación . Esto permite al programador escribir código como si se renderizara toda la página en cada cambio, mientras que React solo renderiza los componentes que realmente cambian. Esta renderización selectiva proporciona una mejora significativa en el rendimiento. ^{[ 33 ] [ 34 ]}

Actualizaciones

Cuando se llama de nuevo ReactDOM.render^{a [ 35 ]} para el mismo componente y objetivo, React representa el nuevo estado de la interfaz de usuario en el DOM virtual y determina qué partes (si las hay) del DOM vivo necesitan cambiar. ^{[ 36 ]}

Los métodos de ciclo de vida para componentes basados ​​en clases utilizan una forma de enganche que permite la ejecución de código en puntos específicos durante la vida útil de un componente.

• ShouldComponentUpdatePermite al desarrollador evitar la renderización innecesaria de un componente devolviendo falso si no se requiere una renderización.
• componentDidMountSe llama una vez que el componente se ha "montado" (el componente se ha creado en la interfaz de usuario, a menudo asociándolo con un nodo DOM ). Esto se usa comúnmente para activar la carga de datos desde una fuente remota a través de una API .
• componentDidUpdatese invoca inmediatamente después de que se produce la actualización. ^{[ 37 ]}
• componentWillUnmountSe llama inmediatamente antes de que el componente se desmonte. Esto se usa comúnmente para eliminar dependencias del componente que consumen muchos recursos y que no se eliminarán simplemente al desmontar el componente (por ejemplo, eliminar cualquier setInterval()instancia relacionada con el componente o un " eventListener " configurado en el "documento" debido a la presencia del componente).
• renderEs el método del ciclo de vida más importante y el único obligatorio en cualquier componente. Generalmente se llama cada vez que se actualiza el estado del componente, lo cual debe reflejarse en la interfaz de usuario.

JSX , o JavaScript XML, es una extensión de la sintaxis del lenguaje JavaScript. ^{[ 38 ]} Similar en apariencia a HTML, ^{[ 16 ] : 11} JSX proporciona una forma de estructurar la representación de componentes utilizando una sintaxis familiar ^{[ 16 ] : 15} para muchos desarrolladores. Los componentes de React se suelen escribir utilizando JSX, aunque no es necesario (los componentes también pueden escribirse en JavaScript puro). Durante la compilación, JSX se convierte en código JavaScript. JSX es similar a otra sintaxis de extensión creada por Facebook para PHP llamada XHP .

Un ejemplo de código JSX:

function Example () { // Declara una nueva variable de estado, que llamaremos "count" const [ count , setCount ] = useState ( 0 );return ( < div > < p > Has hecho clic { count } veces </ p > < button onClick = {() => setCount ( count + 1 )}> Haz clic aquí </ button > </ div > ); }