Pourquoi React est-il apparu ? Introduction au contexte historique de l'émergence de React

Cet article parle principalement des raisons de la naissance de react, de la raison pour laquelle React est apparu, des informations historiques de React, etc. Lisons maintenant cet article ensemble

La raison pourquoi React est né

React est une bibliothèque JS développée par Facebook, alors pourquoi Facebook a-t-il créé React ?
Facebook estime que MVC ne peut pas répondre à ses besoins d'expansion. En raison de sa très grande base de code et de son organisation énorme, MVC devient rapidement complexe. Chaque fois qu'une nouvelle fonction ou fonctionnalité doit être ajoutée, la complexité du système devient la croissance du système. Les séries rendaient le code fragile et imprévisible et, par conséquent, leur MVC s'effondrait. Je pense que MVC n'est pas adapté aux applications à grande échelle. Lorsqu'il existe de nombreux modèles et vues correspondantes dans le système, sa complexité augmente rapidement, ce qui le rend très difficile à comprendre et à déboguer, d'autant plus qu'il peut y avoir un flux de données bidirectionnel entre les modèles et les vues.

Résoudre ce problème nécessite "d'organiser le code d'une manière ou d'une autre pour le rendre plus prévisible", ce qui a été réalisé avec Flux et React

Flux est une architecture système, Utilisé pour promouvoir le flux de données unidirectionnel dans les applications. React, un framework JavaScript permettant de créer des « interfaces utilisateur Web » « prévisibles » et déclaratives, a permis à Facebook de développer des applications Web plus rapidement.

Discutez principalement des problèmes de React :
Quels problèmes React est-il utilisé pour résoudre ? Le site officiel dit ceci :

Nous construisons React pour résoudre un problème : créer de grandes applications avec des données qui changent au fil du temps.>

1 Décrivez simplement à quoi l'application devrait ressembler à tout moment, et React gérera automatiquement les mises à jour de l'interface utilisateur lorsque les données changent<.> 2. Lorsque les données changent, React ne met en fait à jour qu'une partie du changement

React consiste à créer des composants réutilisables. En fait, lorsque nous utilisons React, nous faisons plus que créer des composants. L'encapsulation facilite la réutilisation du code, les tests et la séparation des problèmes.

Sur le site officiel de React, nous avons découvert les quatre raisons de créer des documents React grâce à « Pourquoi avons-nous construit React ? » :

1. React n'est pas un framework MVC, React est une bibliothèque pour construire des interfaces utilisateur composables. Il encourage la création de composants d'interface utilisateur réutilisables qui modifient les données au fil du temps.
2. React n'utilise pas de modèles
Traditionnellement, les interfaces utilisateur des applications Web sont construites à l'aide de modèles ou d'instructions HTML. Ces modèles spécifient un ensemble complet d'abstractions qui vous permettent de créer votre interface utilisateur

Contrairement à React, qui gère la création d'interfaces utilisateur en les divisant en composants. Cela signifie que React utilise un véritable langage de programmation complet pour restituer les vues.

3. Les mises à jour réactives sont très simples

Dans une application JS traditionnelle, vous devez prendre en compte les modifications des données, puis demander au DOM d'apporter des modifications pour les maintenir à jour. Même AngularJS fournit une interface déclarative via des directives et des liaisons de données pour demander une fonction associée pour mettre à jour manuellement les nœuds DOM. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois

React Reference Manual
pour en savoir plus)

React utilise une méthode différente Lorsque le composant est initialisé pour la première fois, le. La méthode render est appelée pour essayer de générer une performance légère. Grâce à cette représentation, une chaîne de balises est générée puis insérée dans le document. Lorsque les données changent, la méthode de rendu est à nouveau appelée. Afin de terminer la mise à jour aussi efficacement que possible, nous comparons la valeur renvoyée par l'appel de rendu avec la nouvelle valeur, puis produisons une modification minimale du DOM appliqué.


Les données renvoyées par render ne sont ni une chaîne ni un nœud DOM. Il s'agit d'un type léger qui décrit à quoi devrait ressembler le DOM.

4.HTML5 n'est qu'un début

Parce que React a sa propre représentation de document légère, nous pouvons faire des choses sympas avec

1 Le formulaire HTML dynamique de Facebook peut être. remplacé par le rendu.

2. Instagram est une application Web « à page unique » entièrement construite avec React et Backbone.Router. Les concepteurs peuvent écrire du code React en utilisant JSX comme d'habitude.

3. J'ai construit un prototype d'application interne exécutant React sur un poste de travail Web, en utilisant React pour piloter des vues iOS natives via un pont Objective-C.

4. Vous pouvez exécuter React sur le serveur, ce qui facilite le référencement, les performances, le partage de code et la flexibilité du projet.

5. Les événements sont cohérents et standardisés dans tous les navigateurs modernes (y compris IE8), et la délégation d'événements est automatiquement utilisée.

Les grands principes de React

DOM virtuel et DOM virtuel
Dans les applications Web traditionnelles, les opérations DOM sont généralement mises à jour directement, mais nous savons que les mises à jour du DOM sont généralement coûteuses. Afin de réduire autant que possible les opérations sur le DOM, React propose un moyen différent et puissant de mettre à jour le DOM au lieu d'exploiter directement le DOM. Il s'agit de Virtual DOM, un DOM virtuel léger, qui est un objet abstrait par React et décrit à quoi devrait ressembler le DOM et comment il doit être présenté. Utilisez ce DOM virtuel pour mettre à jour un DOM plus réel, et ce DOM virtuel gère les mises à jour du DOM réel.
Pourquoi cela peut-il être plus rapide grâce à cette couche supplémentaire d'opérations Virtual DOM ? En effet, React dispose d'un algorithme de différence. La mise à jour du DOM virtuel ne garantit pas que cela affectera immédiatement le DOM réel. React attendra la fin de la boucle d'événements, puis utilisera cet algorithme de différence pour calculer la plus petite valeur en comparant la nouvelle valeur actuelle. Représentation DOM avec la précédente. Étapes pour mettre à jour le vrai DOM.

React Diff

1. Le DOM virtuel garantit que seules les opérations DOM réelles sont effectuées sur les parties de l'interface qui changent réellement.
Les pages Web sont composées d'arbres DOM. Lorsqu'une certaine partie change, cela correspond en fait à un changement d'un certain nœud DOM. Dans React, l'idée de construire une interface UI est de déterminer l'interface en fonction de l'état actuel. Les deux états avant et après correspondent aux deux interfaces, puis réagissent en comparant la différence entre les deux interfaces.
Les ingénieurs de Facebook ont ​​fait deux hypothèses simples sur l'interface Web, qui ont réduit la complexité de l'algorithme Diff directement à O(n)
1. Deux composants identiques produisent des structures DOM similaires, et des composants différents produisent des structures DOM similaires différentes. Structures DOM
2. Pour un groupe de nœuds enfants au même niveau, ils peuvent être distingués par des identifiants uniques

Différents types de nœuds sont générés avant et après la même position du nœud, et réagissent directement supprime les nœuds précédents, puis crée et insère un nouveau nœud. La suppression d'un nœud détruira complètement le nœud. S'il y a des nœuds enfants sous le nœud supprimé, ces nœuds enfants seront également complètement supprimés et ils ne le seront pas. comparé par l'utilisateur plus tard

Lorsque React rencontre différents composants au même endroit, il détruit simplement le premier composant et ajoute le composant nouvellement créé. Différents composants produisent généralement des structures DOM différentes. Au lieu de perdre du temps à comparer leurs structures, leurs structures ne sont fondamentalement pas équivalentes. Il est préférable de créer complètement un nouveau composant.

2. Comparez les nœuds niveau par niveau
Dans React, l'algorithme de l'arbre est très simple. Deux arbres ne compareront que les nœuds du même niveau. Comparez l'arborescence précédente et l'arborescence modifiée au même niveau de nœud. React compare tous les nœuds enfants sous le même nœud parent. Lorsqu'il s'avère que le nœud n'existe plus, le nœud et ses nœuds enfants seront complètement supprimés et aucune autre comparaison ne sera effectuée. Par conséquent, tant que l'arborescence est parcourue une fois, la comparaison de la structure DOM peut être terminée. .

React ne considérera que la transformation de position des nœuds sur la même couche, et uniquement la simple suppression et création de nœuds sur différentes couches. Lorsque le nœud racine découvre que A dans le nœud enfant est manquant, il détruira directement A ; et lorsque D découvre qu'il a un nœud enfant supplémentaire, il créera A en tant que nœud enfant.

Afin de maintenir une structure stable qui contribuera à améliorer les performances, nous pouvons masquer ou afficher un nœud via CSS au lieu de supprimer ou d'ajouter des nœuds DOM.

Pour les nœuds du même type, l'algorithme est relativement simple et React réinitialisera ses propriétés pour réaliser la conversion des nœuds.
Par exemple :
renderA:

renderB:

L'attribut style du DOM virtuel est légèrement différent, sa valeur n'est pas une simple chaîne mais doit être un objet.

3. Comparaison des nœuds de liste :
React détruira et recréera les nœuds lorsqu'ils ne sont pas sur la même couche, même s'ils sont exactement les mêmes. Les nœuds de liste sont utilisés lorsqu'ils sont sur la même couche. .Algorithme Diff,

Si la valeur clé de ce li n'est pas définie, cela entraînera des problèmes de performances lors de la mise à jour de la liste. React ne peut pas mettre à jour cette liste de manière très efficace

Composants. Le nœud du composant

dans l'arborescence DOM est appelé un élément, mais ici il est appelé composant sur Virtual DOM. Le nœud de Virtual DOM est un composant abstrait complet, composé de composants.

L'utilisation de composants est extrêmement importante dans React, car l'existence de composants rend le calcul des différences DOM plus efficace.

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous). .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!