Quand le framework React est-il sorti ?

Le framework React est sorti en 2013 ; React est issu du projet interne de Facebook et a été open source en mai 2013. React est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur, principalement utilisée pour créer une interface utilisateur ; les utilisateurs peuvent transmettre différents types de paramètres dans React, tels que des codes de déclaration pour vous aider à restituer l'interface utilisateur, des éléments HTML DOM statiques ou des variables dynamiques et même interactives. composants applicatifs.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

1. L'origine et le développement de React

React est une bibliothèque JavaScript utilisée pour construire des interfaces utilisateur. Elle est issue d'un projet interne de Facebook car l'entreprise n'était pas satisfaite de tous les frameworks JavaScript MVC du marché. et j'ai décidé d'écrire votre propre ensemble pour créer le site Web Instagram. Après l'avoir réalisé, j'ai trouvé que cet ensemble de choses était très utile, c'est pourquoi il est devenu open source en mai 2013.

2. Le point de départ du développement d'interfaces frontales basées sur React

devient de plus en plus complexe, et ses problèmes essentiels peuvent essentiellement être attribués à la manière de refléter efficacement les données dynamiques du serveur ou de l'utilisateur. entrée dans des interfaces utilisateur complexes. Le framework React de Fackbook est une solution complètement orientée vers ce problème. Selon le site officiel, son point de départ est : utilisé pour développer de grandes applications avec des données qui changent au fil du temps (Construire de grandes applications avec des données qui changent au fil du temps). Par rapport au développement front-end traditionnel, React a ouvert une approche tout à fait alternative pour parvenir à un développement performant et efficace d'interfaces front-end.

React est principalement utilisé pour créer une interface utilisateur. Vous pouvez transmettre différents types de paramètres dans React, tels que des codes de déclaration pour vous aider à restituer l'interface utilisateur, des éléments HTML DOM statiques, des variables dynamiques et même des composants d'application interactifs.

3. La relation entre Recat et MVC traditionnel

Bibliothèque de couches de vue légère ! Une bibliothèque JavaScript pour créer des interfaces utilisateur

React n'est pas un framework MVC complet. Il peut tout au plus être considéré comme la couche (vue) de MVC. Même React ne reconnaît pas entièrement le modèle de développement MVC ; Interface utilisateur. On comprend simplement que React divise l'interface en petits blocs indépendants, et chaque bloc est un composant. Ces composants peuvent être combinés et imbriqués pour devenir notre page

4. L'incarnation des hautes performances de React : Virtual DOM.

Principe : Au cours de notre processus de développement, nous devons refléter les données imprévisibles dans l'interface utilisateur en temps réel, puis nous devons faire fonctionner le DOM. Cependant, des manipulations fréquentes ou complexes du DOM entraîneront de nombreux problèmes de performances. ——La manière d'effectuer des opérations DOM complexes hautes performances est généralement un indicateur important des compétences d'un développeur front-end.

React introduit pour cela le mécanisme DOM virtuel (virtual DOM) : un ensemble d'API DOM est implémenté côté navigateur à l'aide de javascript. Lors du développement basé sur React, toute la construction du DOM est effectuée via le DOM virtuel. Chaque fois que les données changent, React restitue l'intégralité de l'arborescence DOM. Ensuite, React compare l'intégralité de l'arborescence DOM actuelle avec l'arborescence DOM précédente pour obtenir la différence de structure. , seules les parties qui doivent être modifiées effectuent la mise à jour du DOM du navigateur. De plus, React peut traiter l'actualisation du DOM virtuel par lots. Deux modifications de données dans une boucle d'événement (boucle d'événement) sont fusionnées. Par exemple, si vous modifiez continuellement le contenu du nœud de A-B, B-A, React pensera que A devient B. , et encore une fois. Il n'y a aucun changement dans l'interface utilisateur de B à A, et si elle est contrôlée manuellement, cette logique est généralement extrêmement complexe

React Fiber :

Un algorithme de base de réaction publié après React16, React Fiber est une mise à jour. à l'essentiel Une réimplémentation de l'algorithme (déclaration du site officiel). L'algorithme diff était utilisé auparavant

Dans le React précédent, le processus de mise à jour était synchrone, ce qui peut entraîner des problèmes de performances.

Lorsque React décide de charger ou de mettre à jour l'arborescence des composants, il fera beaucoup de choses, comme appeler la fonction de cycle de vie de chaque composant, calculer et comparer le DOM virtuel, et enfin mettre à jour l'arborescence DOM. effectué de manière synchrone, c'est-à-dire dès qu'un processus de chargement ou de mise à jour est lancé, il ne sera pas interrompu au milieu. En raison de la nature monothread de JavaScript, si l'arborescence des composants est très volumineuse et que chaque tâche de synchronisation prend trop de temps, des retards se produiront.

La méthode de React Fiber est en fait très simple : le sharding. Divisez une longue tâche en plusieurs petits morceaux.Le temps de fonctionnement de chaque petit morceau est très court, bien que le temps total soit encore très long, après l'exécution de chaque petit morceau, d'autres tâches ont la possibilité de s'exécuter, de sorte que le seul thread. ne sera pas exclusive, et d'autres tâches auront toujours la possibilité de s'exécuter.

5. Caractéristiques et avantages de React

1. DOM virtuel

Notre méthode précédente d'exploitation du DOM consistait à utiliser document.getElementById(). Ce processus implique en fait de lire d'abord la structure HTML, de la convertir. la structure en variables et effectuer des opérations

Et Reactjs définit un ensemble de modèles dom sous forme de variables.Toutes les opérations et conversions sont directement dans les variables.Cela réduit le besoin d'exploiter le vrai dom.Les performances sont vraiment élevées.Quelle est la différence essentielle avec le MVC traditionnel. framework ? Il ne traite pas du dom

2. Système de composants

L'idée centrale de React est que n'importe quelle zone ou élément de la page peut être considéré comme un composant

Alors, qu'est-ce qu'un composant ?

Le composant fait référence à un agrégat qui contient à la fois des éléments HTML, CSS, JS et image

3 Flux de données unidirectionnel

En fait, le contenu principal de Reactjs est la liaison de données. appelée liaison de données fait référence à tant que lier certaines données côté serveur à la page frontale, et les développeurs ne peuvent se concentrer que sur la mise en œuvre de l'entreprise

4 Syntaxe JSX

En vue, nous utilisons la fonction de rendu pour construire. la structure dom du composant, qui a des performances plus élevées car elle permet d'économiser. J'ai suivi le processus de recherche et de compilation de modèles, mais lorsque vous utilisez createElement pour créer une structure dans le rendu, le code est moins lisible et plus chargé pour le moment. vous pouvez utiliser la syntaxe JSX pour créer dom dans le rendu, ce qui résout ce problème, mais le principe est que vous devez utiliser des outils pour compiler jsx

[Recommandations associées : Tutoriel vidéo Redis, Vidéo de programmation]

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!