Renderizado de elementos de React

En React 18, el renderizado de elementos tiene algunos cambios con respecto a versiones anteriores, especialmente en el uso deReactDOM.createRooty las nuevas características de concurrencia. A continuación se muestra un ejemplo y una explicación detallada que muestran cómo renderizar elementos en React 18.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';

// Crear un componente simple de React
function App() {
    return <h1>Hello, React 18!</h1>;
}

// Obtener el contenedor DOM con id "example" y crear un nodo raíz de React
const root = ReactDOM.createRoot(document.getElementById("example"));

// Renderizar el componente React en el nodo raíz del DOM
root.render(<App />);

Los elementos de React son la unidad más pequeña para construir aplicaciones de React; describen lo que quieres ver en la pantalla. Los elementos de React son objetos inmutables; una vez creados, no se pueden cambiar.

const element = <h1>Hello, world!</h1>;

A diferencia de los elementos DOM del navegador, los elementos en React son en realidad objetos ordinarios. React DOM puede garantizar que el contenido de datos del DOM del navegador se mantenga coherente con los elementos de React.

Renderizar elementos en el DOM

Primero, en una página HTML, agregamos unid="example"de<div>:

<div id="example"></div>

Todo el contenido dentro de este div será gestionado por React DOM, por lo que lo llamamos nodo DOM "raíz".

Cuando desarrollamos aplicaciones con React, normalmente definimos solo un nodo raíz. Pero si estás introduciendo React en un proyecto existente, es posible que necesites definir nodos raíz de React por separado en diferentes partes.

Para renderizar elementos de React en el nodo raíz del DOM, los pasamos todos alroot.render()método para renderizarlos en la página:

Ejemplo

//Crear un elemento de React const element =<h1>Hello, world!</h1>; //Obtener el contenedor DOM y crear el nodo raíz const root = ReactDOM.createRoot(document.getElementById("example")); //Renderizar el elemento de React en el nodo raíz del DOM root.render(element);

Pruébalo »

root.renderEl método renderiza element en el nodo raíz creado anteriormente, de modo que element se mostrará dentro del elemento DOM con id "example".

Actualizar el renderizado de elementos

Los elementos de React son inmutables. Una vez creado un elemento, no puedes cambiar su contenido ni sus atributos.

Actualmente, la única forma de actualizar la interfaz es crear un nuevo elemento y pasarlo al método ReactDOM.render():

Veamos el ejemplo de este temporizador:

Ejemplo

const root = ReactDOM.createRoot(document.getElementById("example")); function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>Ahora son{new Date().toLocaleTimeString()}.</h2> </div> ); root.render(element); } setInterval(tick, 1000);

Pruébalo »

El ejemplo anterior utiliza el método setInterval() para llamar a ReactDOM.render() cada segundo.

Podemos encapsular la parte que se va a mostrar; el siguiente ejemplo la representa con una función:

Ejemplo

function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>Ahora son{props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Pruébalo »

Además de las funciones, también podemos crear una clase ES6 de React.Component que encapsule los elementos a mostrar. Cabe señalar que en el método render(), es necesario usarthis.propsreemplazarprops：

Ejemplo

class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>Ahora son{this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Pruébalo »

React solo actualiza las partes necesarias.

Es importante destacar que React DOM primero compara las diferencias entre el contenido anterior y posterior de los elementos, y durante el proceso de renderizado solo actualiza las partes que han cambiado.

Otras extensiones