Guide animé React Basic

L’auteur de la note, dont nous publions la traduction aujourd’hui, dit qu’il existe un écart entre l’utilisation de React pour développer des interfaces utilisateur et la nécessité de savoir comment React fonctionne réellement. De nombreuses personnes qui utilisent React dans la pratique ne savent pas ce qui se passe dans les entrailles de cette bibliothèque. Ici, sous forme animée, nous allons considérer certains processus clés qui se produisent dans React lors de la formation des interfaces utilisateur.

Lancement d'une application React

Il convient de noter que pour créer des applications React, vous ne connaissez probablement pas les mécanismes internes de React. Mais j'ai décidé de préparer ce matériel pour tous ceux qui, pour une raison quelconque, veulent mieux comprendre le travail de React. Les processus décrits sont présentés sous forme animée. J'espère que cela contribuera à rendre leur analyse plus claire.

React, lorsque vous démarrez l'application pour la première fois, monte automatiquement la classe App dans le conteneur racine de l'application.


Premier montage <App />

DOM virtuel et algorithme de comparaison

Au cours des travaux du sous-système React qui implémente l'algorithme Diffing, une recherche est effectuée pour les différences entre les deux DOM virtuels (modèle d'objet de document virtuel, modèle de document virtuel). Ralentissez un moment. Deux DOM virtuels? Il semble qu'il n'y ait qu'un seul DOM virtuel dans React ... Voyons-le. React compare le précédent DOM virtuel avec le nouveau. La mise à jour du DOM basé sur navigateur n'est effectuée que si, lors de la comparaison des DOM virtuels, des différences entre eux sont révélées.


Animation abstraite de l'algorithme de comparaison React. S'il s'avère que les deux arborescences DOM virtuelles sont différentes, le DOM réel dans le navigateur correspond à l'arborescence DOM virtuelle la plus récente

Considérez ce qui se passe sur l'animation ci-dessus.

• Sur l'événement click , un appel API.tweet() est API.tweet() avec le message contenant les données de la requête POST.
• En réponse à la demande, la payload retournée, ces données sont envoyées au rappel (event) => { … } .
• Si les données renvoyées à la payload doivent entraîner une modification des props , une comparaison des arborescences DOM virtuelles est effectuée.
• Si les arbres s'avèrent différents, l'arbre le plus récent est envoyé au navigateur.
• Ensuite, le nouveau DOM virtuel devient ancien, et nous attendons de nouveaux événements.

Composants React

Le composant React n'est qu'un objet JavaScript. React crée son propre DOM virtuel, qui est une arborescence de l'ensemble de la structure de l'interface utilisateur. React stocke l'arborescence DOM virtuelle en mémoire. Avant que ce qui se trouve dans le DOM virtuel ne soit physiquement affiché dans une fenêtre de navigateur, React peut effectuer de nombreuses opérations pour ajouter, mettre à jour et supprimer des éléments du DOM virtuel.

N'utilisez pas la méthode du composant render() pour tout ce qui n'est pas lié au rendu des éléments de l'interface utilisateur. Si vous devez modifier l'état ou les propriétés d'un composant, utilisez des méthodes standard du cycle de vie des composants React.

La méthode render () doit toujours rester une fonction pure.

La méthode render() met à jour le composant virtuel DOM. Si la nouvelle arborescence DOM virtuelle est différente de l'arborescence précédemment affichée, React, en plus de mettre à jour le DOM virtuel, mettra également à jour le DOM du navigateur réel. Le développeur n'a pas à mettre à jour directement le navigateur DOM directement. Cette règle s'applique à tous les emplacements du code d'une application React. Il est particulièrement important lorsqu'il est appliqué à la fonction render() .


Ne polluez pas la méthode render () avec des appels de fonction qui mettent à jour le DOM directement

Dans la méthode render() , vous ne devez pas modifier l'état du composant (même en utilisant setState ) et effectuer des requêtes HTTP. N'accédez pas à jQuery à partir de cette méthode, n'exécutez pas de requêtes pour charger certaines données. Le fait est que la méthode render() doit être maintenue dans un état où elle serait une fonction pure. Cette méthode est toujours appelée au stade final des mécanismes des composants. Au cours de sa mise en œuvre, il suffit de mettre à jour l'interface utilisateur. Il est supposé que toutes les mises à jour du DOM virtuel sont déjà terminées.

Événements du cycle de vie des composants

Lorsqu'un composant est monté pour la première fois dans le DOM, React déclenche son événement de cycle de vie componentWillMount . Une fois le composant virtuel affiché pour la première fois (c'est-à-dire qu'il est monté pour la première fois dans le DOM réel du navigateur), un autre événement est appelé - componentDidMount .

Il est prévu que la plupart des composants logiques invoqués à toutes les étapes de l'application seront décrits précisément dans leurs méthodes de cycle de vie.

Résumé

De nombreux développeurs React utilisent aujourd'hui des composants et des crochets fonctionnels au lieu de composants basés sur des classes et leurs méthodes de cycle de vie. Les méthodes du cycle de vie sont même considérées comme dangereuses. Si vous croyez à la documentation de React, ces méthodes seront peut-être obsolètes à l'avenir. C'est pourquoi l'auteur considère cet article comme une sorte de description de technologies, dont certaines pourraient bientôt tomber dans l'oubli. Mais lui, malgré cela, espère que ce matériel sera utile à ceux qui commencent tout juste à se familiariser avec React et à ceux qui s'intéressent à l'histoire du développement des technologies de développement Web.

Chers lecteurs! Utilisez-vous des crochets React?