coopernet Réussir son site web et ses applications de la conception à la réalisation

Element

Les éléments sont les blocs élémentaires d’une application React. Exemple d'élément :

const element = <h1>Bonjour, monde</h1>;

Contrairement aux éléments DOM d’un navigateur, les éléments React sont de simples objets peu coûteux à créer.

Les éléments représentent la base des composants. Les éléments React sont immuables. Une fois votre élément créé, vous ne pouvez plus modifier ses enfants ou ses attributs. Un élément est comme une image d’un film à un instant T : il représente l’interface utilisateur à un point précis dans le temps.

React DOM

React DOM se charge de mettre à jour le DOM afin qu’il corresponde aux éléments React.

Pour faire le rendu d’un élément React dans un nœud DOM racine, il faut passer les deux à la méthode ReactDOM.render() :

const element = <h1>Bonjour, monde</h1>;
ReactDOM.render(element, document.getElementById('root'));

Component

Les composants sont des “morceaux” d’interface qui sont hiérarchiquement imbriqués. Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées  (appelées « props ») et renvoient des éléments React décrivant ce qui doit apparaître à l’écran.

Fonctions composants et composants à base de classes

Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript :

function Welcome(props) {
  return <h1>Bonjour, {props.name}</h1>;
}

Cette fonction est un composant React valide car elle accepte un seul argument « props » (qui signifie « propriétés ») contenant des données, et renvoie un élément React. Nous appelons de tels composants des « fonctions composants », car ce sont littéralement des fonctions JavaScript.

Vous pouvez également utiliser une classe ES6 pour définir un composant :

class Welcome extends React.Component {
  render() {
    return <h1>Bonjour, {this.props.name}</h1>;
  }
}

Les deux composants ci-dessus sont équivalents du point de vue de React.

Virtual DOM

React crée un DOM virtuel qu’il est facile de créer et de modifier et qui permet de mettre à jour le DOM (en réaction… d’où le nom de la bibliothèque…).
Lorsque l’état (state) d’un élément REACT change, React crée un nouvel élément, le compare à l’ancien élément existant et modifie uniquement la partie à modifier sur le DOM virtuel (information brute) puis sur DOM réel (les balises HTML).      

Pourquoi est il plus rapide de passer par le DOM virtuel ?

Quand un élément de l'interface utilisateur change, un nouveau dom virtuel est créé. Ce dernier est représenté sous forme d'arbre dont chaque element html est un noeud.

Ce nouvel arbre est comparé à l'ancien. Ensuite, l'algorithme de React calcule comment changer le DOM réel de la façon la plus rapide possible. La modification du DOM est considéré comme un problème de complexité O(n³) mais l'algorithme de React permet de baisser la complexité à O(n). C'est donc à ce niveau que se situe le gain en terme de temps d'affichage.

Pour faire une méthaphore, quand on modifie plusieurs éléments du dom sans essayer d'optimiser, c'est un peu comme modifier un immeuble sans réfléchir à comment s'y prendre. Par exemple s'il s'agit d'ajouter un étage à cet immeuble, il faudra sans doute également renforcer la structure porteuse. Si vous commencez par ajouter l'étage, il vous faudra ensuite la supprimer pour renforcer d'abord la structure porteuse et enfin re-construire l'étage en question !

Cycle de vie d'un component

Les composant nous offrent la possibilité d'insérer notre code (hook) à plusieurs étapes de la vie d'un component :

• constructeur : c'est l'endroit  (moment) pour donner des valeurs de façon synchrone à la propriété state. Il sera cependant impossible d'appeler setState ici car cette méthode demande que le DOM ait déjà été chargé (après un premier render).
• render : c'est ici que se construit le DOM avec les éventuels changement que cela implique concernant la visualisation
• componentDidMount : c'est l'endroit à privilégier pour des appels asynchrones (fetch par exemple ou xhr...)
• componentDidUpdate(prevProps, prevState, snapshot):  à utiliser dans le cas ou l'on veut faire un appel AJAX après qu'un component a été modifié. Permet de vérifier que les props ou le state actuels concernés diffèrent des anciennes valeurs.
• componentWillUnmount : C'est l'endroit ou faire le ménage pour des éléments comme  l’invalidation de minuteurs, l’annulation de requêtes réseau...