render
renderiza una pieza de JSX («nodo de React») en un nodo del DOM del navegador.
render(reactNode, domNode, callback?)
Referencia
render(reactNode, domNode, callback?)
Utiliza render
para mostrar un componente de React dentro de un elemento del DOM del navegador.
import { render } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);
React mostrará <App />
en el domNode
, y se encargará de gestionar el DOM dentro de él.
Una aplicación totalmente construida con React tendrá usualmente una sola llamada a render
con su componente raíz. Una página que utiliza React para partes de la página puede tener tantas llamadas a render
como sean necesarias.
Parámetros
-
reactNode
: Un nodo de React que quieras mostrar. Por lo general se trata de una pieza de JSX como<App />
, pero también puedes pasar un elemento de React construido concreateElement()
, un string, un número,null
, oundefined
. -
domNode
: Un elemento del DOM. React mostrará elreactNode
que pases dentro de este elemento del DOM. Desde este momento, React administrará el DOM dentro dedomNode
y lo actualizará cuando tu árbol de React cambie. -
callback
opcional: Una función. Si se pasa, React la llamará luego de que tu componente sea colocado dentro del DOM.
Retorno
render
Por lo general retorna null
. Sin embargo, si el reactNode
que pasas es un component de clase, entonces retornará una instancia de ese componente.
Advertencias
-
En React 18,
render
fue reemplazado porcreateRoot
. Por favor usacreateRoot
para React 18 y versiones posteriores. -
La primera vez que llamas a
render
, React limpiará todo el contenido HTML existente dentro deldomNode
antes de renderizar el componente de React dentro de este. Si tudomNode
contiene HTML generado por React en el servidor o durante la compilación, usa en su lugarhydrate()
, ya que este adjunta los manejadores de eventos al HTML existente. -
Si llamas a
render
en el mismodomNode
más de una vez, React actualizará el DOM según sea necesario para reflejar el JSX más reciente que hayas pasado. React decidirá qué partes del DOM se pueden reutilizar y cuáles necesitan ser recreadas «haciendo una comparación» con el árbol previamente renderizado. Llamar de nuevo arender
en el mismodomNode
es similar a llamar a la funciónset
en el componente raíz: React evita actualizaciones innecesarias del DOM. -
Si tu aplicación está totalmente construida con React, es probable que tengas una sola llamada a
render
en tu aplicación. (Si usas un framework, puede que haga esta llamada por ti.) Cuando quieras renderizar un fragmento de JSX en un lugar diferente del árbol del DOM que no sea hijo de tu componente (por ejemplo, un modal o un tooltip), usacreatePortal
en lugar derender
.
Uso
Usa render
para mostrar un componente de React dentro de un nodo DOM del navegador.
import { render } from 'react-dom';
import App from './App.js';
render(<App />, document.getElementById('root'));
Renderiza el componente raíz
En aplicaciones totalmente construidas con React, por lo general sólo realizarás esto una vez al inicio —para renderizar el componente «raíz».
import './styles.css'; import { render } from 'react-dom'; import App from './App.js'; render(<App />, document.getElementById('root'));
Generalmente no necesitas llamar a render
de nuevo o llamarlo en otros lugares. En este punto, React manejará el DOM de tu aplicación. Si quieres actualizar la UI, tu componente puede hacerlo con el uso de estado.
Renderizar múltiples raíces
Si tu página no está totalmente construida con React, llama a render
por cada pieza de UI de nivel superior que esté administrada por React.
import './styles.css'; import { render } from 'react-dom'; import { Comments, Navigation } from './Components.js'; render( <Navigation />, document.getElementById('navigation') ); render( <Comments />, document.getElementById('comments') );
Puedes destruir los árboles renderizados con unmountComponentAtNode()
.
Actualizar el árbol renderizado
Puedes llamar a render
más de una vez en el mismo nodo del DOM. Siempre y cuando la estructura del árbol del componente coincida con lo renderizado previamente, React preservará el estado. Nota como puedes escribir en el input, lo que significa que las repetidas llamadas a render
cada segundo en este ejemplo no son destructivas:
import { render } from 'react-dom'; import './styles.css'; import App from './App.js'; let i = 0; setInterval(() => { render( <App counter={i} />, document.getElementById('root') ); i++; }, 1000);
No es muy común llamar a render
varias veces. Por lo general lo que debes hacer es actualizar el estado dentro de uno de los componentes.