En el artículo anterior sobre introducción a JSX , vimos cómo crear un elemento React. El elemento React es la unidad renderizable más pequeña disponible en React. Podemos representar dichos elementos usando ReactDOM como se describe en el artículo anterior. Los elementos React son diferentes de los elementos DOM, ya que los elementos React son objetos javascript simples y son eficientes para crear. Los elementos de React son los componentes básicos de cualquier aplicación de React y no deben confundirse con los componentes de React, que se analizarán en otros artículos.
Representar un elemento en React:Para representar cualquier elemento en el DOM del navegador, necesitamos tener un contenedor o un elemento DOM raíz. Es casi una convención tener un elemento div con id=”root” o id=”app” para ser usado como el elemento DOM raíz. Supongamos que nuestro archivo index.html tiene la siguiente declaración dentro.
<div id="root"></div>
Nombre de archivo App.js: ahora, para representar un elemento React simple en el Node raíz, debemos escribir lo siguiente en el archivo App.js.
javascript
import React,{ Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Welcome to GeeksforGeeks!</h1>
</div>
);
}
}
export default App;
Producción:
Ahora, ha creado su primer React Element y también lo ha renderizado en su lugar, pero React no fue desarrollado para crear páginas estáticas, la intención de usar React es crear una página web más lógica y activa. Para hacerlo, necesitaremos actualizar los elementos. La siguiente sección nos guiará a través de la misma.
Actualización de un elemento en React: los elementos de React son inmutables, es decir, una vez que se crea un elemento, es imposible actualizar sus hijos o atributos. Por lo tanto, para actualizar un elemento, debemos usar el método render() varias veces para actualizar el valor a lo largo del tiempo. Veamos esto en un ejemplo.
javascript
import React from 'react';
import ReactDOM from 'react-dom';
function showTime()
{
const myElement = (
<div>
<h1>Welcome to GeeksforGeeks!</h1>
<h2>{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
myElement,
document.getElementById("root")
);
}
setInterval(showTime, 1000);
Producción:
En el ejemplo anterior, hemos creado una función showTime() que muestra la hora actual, y hemos establecido un intervalo de 1000 ms o 1 segundo que recuerda la función cada segundo, actualizando así la hora en cada llamada. Para simplificar, solo hemos mostrado el lapso de tiempo de un segundo en la imagen dada.
React Render Efficiency: React se elige sobre el legado de la actualización DOM debido a su mayor eficiencia. React logra esta eficiencia mediante el uso del DOM virtual y el algoritmo de diferenciación eficiente. En el ejemplo de mostrar la hora actual, en cada segundo llamamos al método de representación, y el DOM virtual se actualiza y luego el diferenciador verifica las diferencias particulares en el DOM del navegador y el DOM virtual y luego actualiza solo lo que se requiere, como en el ejemplo dado, el tiempo es lo único que cambia cada vez, no el título «¡Bienvenido a GeeksforGeeks!» por lo tanto, React solo actualiza el tiempo en sí mismo, lo que lo hace mucho más eficiente que la manipulación DOM convencional.
Puntos importantes a tener en cuenta:
- Llamar al método render() varias veces puede servir para nuestro propósito en este ejemplo, pero en general, nunca se usa, sino que se usa un componente con estado que cubriremos en otros artículos.
- Un React Element casi nunca se usa aislado, podemos usar elementos como bloques de construcción para crear un componente en React. Los componentes también se discutirán en próximos artículos.