Rendu des éléments React

Dans React 18, le rendu des éléments présente quelques changements par rapport aux versions précédentes, surtout lors de l'utilisation deReactDOM.createRootet les nouvelles fonctionnalités concurrentes. Voici un exemple détaillé et une explication montrant comment rendre des éléments dans React 18.

Exemple

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

// Créer un composant React simple
function App() {
    return <h1>Bonjour, React 18!</h1>;
}

// Obtenir le conteneur DOM avec l'id "example" et créer un nœud racine React
const root = ReactDOM.createRoot(document.getElementById("example"));

// Rendre le composant React dans le nœud racine du DOM
root.render(<App />);

Les éléments React sont les plus petits blocs de construction des applications React. Ils décrivent ce que vous voulez voir à l'écran. Les éléments React sont des objets immuables ; une fois créés, ils ne peuvent pas être modifiés.

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

Contrairement aux éléments DOM du navigateur, les éléments dans React sont en fait de simples objets. React DOM garantit que le contenu des données du DOM du navigateur reste cohérent avec les éléments React.

Rendu d'un élément dans le DOM

D'abord, nous ajoutons unid="example"de<div>:

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

Tout le contenu à l'intérieur de cette div sera géré par React DOM, c'est pourquoi nous l'appelons le nœud DOM "racine".

Lors du développement d'applications avec React, nous définissons généralement un seul nœud racine. Mais si vous introduisez React dans un projet existant, vous devrez peut-être définir des nœuds racine React séparément dans différentes parties.

Pour rendre un élément React dans le nœud DOM racine, nous les passons tous à laroot.render()méthode pour le rendre sur la page :

Exemple

//Créer un élément React const element =<h1>Hello, world!</h1>; //Obtenir le conteneur DOM et créer un nœud racine const root = ReactDOM.createRoot(document.getElementById("example")); //Rendre l'élément React dans le nœud racine du DOM root.render(element);

Essayez-le »

root.renderLa méthode affiche l'élément dans le nœud racine créé précédemment, de sorte que l'élément sera affiché dans l'élément DOM dont l'id est "example".

Mise à jour du rendu des éléments

Les éléments React sont immuables. Une fois qu'un élément est créé, vous ne pouvez pas modifier son contenu ni ses attributs.

La seule façon de mettre à jour l'interface utilisateur est de créer un nouvel élément et de le passer à la méthode ReactDOM.render() :

Regardons cet exemple de minuteur :

Exemple

const root = ReactDOM.createRoot(document.getElementById("example")); function tick() { const element = ( <div> <h1>Bonjour, monde!</h1> <h2>Il est maintenant{new Date().toLocaleTimeString()}.</h2> </div> ); root.render(element); } setInterval(tick, 1000);

Essayez-le »

L'exemple ci-dessus appelle ReactDOM.render() une fois par seconde à l'aide de la méthode setInterval().

Nous pouvons encapsuler la partie à afficher ; l'exemple suivant utilise une fonction pour la représenter :

Exemple

function Clock(props) { return ( <div> <h1>Bonjour, monde!</h1> <h2>Il est maintenant{props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Essayez-le »

En plus des fonctions, nous pouvons également créer une classe ES6 de React.Component, qui encapsule les éléments à afficher. Notez que dans la méthode render(), vous devez utiliserthis.propspour remplacerprops：

Exemple

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

Essayez-le »

React ne met à jour que ce qui est nécessaire

Il convient de noter que React DOM compare d'abord les différences dans le contenu des éléments avant et après, et lors du rendu, il ne met à jour que les parties qui ont changé.

Autres extensions