Dépréciation

Cette API sera retirée d’une future version majeure de React.

React 18 a remplacé render par createRoot. Utiliser render avec React 18 vous avertira que votre appli se comportera comme dans React 17. Apprenez-en davantage ici.

render fait le rendu d’un bout de JSX (un « nœud React ») dans un nœud DOM du navigateur.

render(reactNode, domNode, callback?)

Référence

render(reactNode, domNode, callback?)

Appelez render pour afficher un composant React dans un élément DOM du navigateur.

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React affichera <App /> dans le domNode, et prendra la main sur la gestion du DOM qu’il contient.

Une appli entièrement construite avec React n’aura généralement besoin que d’un appel à render, pour son composant racine. Une page qui « saupoudre » du React pour des parties de la page pourrait avoir autant d’appels à render que nécessaire.

Voir d’autres exemples ci-dessous.

Paramètres

  • reactNode : un nœud React que vous souhaitez afficher. Ce sera généralement un bout de JSX du genre <App />, mais vous pouvez aussi lui passer un élément React construit avec createElement(), une chaîne de caractères, un nombre, null ou encore undefined.

  • domNode : un élément DOM. React affichera le reactNode que vous lui passez dans cet élément DOM. À partir de là, React gèrera le DOM à l’intérieur de domNode et le mettra à jour lorsque l’arbre React changera.

  • callback optionnel : une fonction. Si elle est passée, React l’appellera immédiatement après que le composant aura été injecté dans le DOM.

Valeur renvoyée

render renvoie habituellement null. Toutefois, si le reactNode que vous avez passé est un composant à base de classe, alors il renverra une instance de ce composant.

Limitations

  • Dans React 18, render a été remplacé par createRoot. Veuillez utiliser createRoot à partir de React 18.

  • La première fois que vous appelez render, React videra tout le HTML existant au sein de domNode avant de faire le rendu du composant React à l’intérieur. Si votre domNode contient du HTML généré par React côté serveur ou lors du build, utilisez plutôt hydrate(), qui se contentera d’attacher les gestionnaires d’événements au HTML existant.

  • Si vous appelez render sur le même domNode plusieurs fois, React mettra à jour le DOM si nécessaire pour refléter le dernier JSX que vous lui avez passé. React décidera quelles parties du DOM réutiliser et lesquelles nécessitent une création à froid en « examinant la correspondance » entre l’arbre React et celui du précédent rendu. Appeler render à nouveau sur le même domNode est similaire à un appel de fonction set sur le composant racine : React évite les mises à jour DOM superflues.

  • Si votre appli est intégralement construite avec React, vous n’aurez sans doute besoin que d’un appel à render dans votre appli. (Si vous utilisez un framework, il le fait peut-être pour vous.) Lorsque vous souhaitez afficher un bout de JSX dans une autre partie du DOM, une partie qui n’est pas un enfant de votre composant (par exemple pour une boîte de dialogue modale ou une infobulle), utilisez createPortal plutôt que render.

Utilisation

Appelez render pour afficher un composant React au sein d’un nœud DOM du navigateur.

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Afficher le composant racine

Dans les applis entièrement construites avec React, vous voudrez généralement ne faire ça qu’une fois au démarrage, pour afficher le composant « racine ».

import './styles.css';
import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

En temps normal, vous ne devriez pas avoir besoin de rappeler render ou de l’appeler à plusieurs endroits. À partir de ce moment-là, c’est React qui gèrera le DOM de votre application. Pour mettre à jour l’UI, vos composants utiliseront l’état local.

Afficher plusieurs racines

Si votre page n’est pas entièrement constuite avec React, appelez render pour chaque élément racine de votre UI qui est géré par 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')
);

Vous pouvez détruire les arborescences ainsi produites avec unmountComponentAtNode().

Mettre à jour l’arbre obtenu

Vous pouvez appeler render plusieurs fois sur le même nœud DOM. Tant que la structure de l’arbre de composants correspond avec celle du rendu précédent, React préservera l’état. Remarquez que vous pouvez taper dans le champ, ce qui signifie que les mises à jour résultant d’appels répétés à render chaque seconde ne sont pas destructrices :

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);

Il est toutefois rare d’appeler render ainsi plusieurs fois. En temps normal, vous mettrez plutôt à jour l’état local de vos composants.

PrécédentpreloadModule
SuivantunmountComponentAtNode