Comment comprendre réagir

react est une bibliothèque JAVASCRIPT utilisée pour créer des interfaces utilisateur ; React est responsable de la présentation du niveau de l'interface utilisateur ; le flux de données dans React circule dans une direction de haut en bas le long de l'arborescence des composants ; , la logique du code est très simple.

L'environnement d'exploitation de ce tutoriel : système Windows7, version React17.0.1, ordinateur Dell G3.

Recommandations associées : "Tutoriel React"

Comment comprendre React ?

Comme Facebook open source React Native pour Android , L'avenir de React semble plus prometteur. Il a lentement évolué depuis le premier framework d'interface utilisateur vers un ensemble de solutions d'applications Web, et le React Native qui en dérive porte un grand objectif : apprendre une fois, écrire n'importe où. Cela semble être un attrait irrésistible pour le front-end.

React a trois mots-clés :

- Juste l'interface utilisateur

- domaine virtuel

- flux de données

Pour comprendre React, je commence par ces trois mots-clés.

2.1 Seul l'interface utilisateur

React est responsable de la présentation du niveau d'interface utilisateur. Bien que de nombreuses personnes utilisent React comme couche View dans l'architecture [MVC], ce n'est pas l'intention initiale de. Réagir.

Dans des circonstances normales, pendant le processus de développement, nous utilisons généralement des modèles ou utilisons directement HTML pour créer l'interface utilisateur, et le HTML est statique. L'utilisation de modèles peut répondre aux besoins dans la plupart des cas, mais cela semble un peu difficile. situations logiques complexes. Trop de contrôles if else ou logiques dans le modèle rendront le code difficile à maintenir. Bien sûr, c'est le cas lorsqu'un modèle unifié est utilisé dans l'ensemble du projet.

React résout le problème d'une manière différente. Il divise l'interface utilisateur en composants au lieu d'utiliser un moteur de modèle et une logique d'affichage, ce qui facilite son extension et sa maintenance. Par conséquent, il introduit les règles de syntaxe de JSX, qui nous permettent d'utiliser une syntaxe de type HTML pour écrire des appels de fonction js.

Dom virtuel 2.2

Le processus général de rendu d'une page par le navigateur est généralement le suivant :

Charger le HTML-> Générer l'arborescence DOM-> tree- >Générer la page

Alors, comment le domaine virtuel de React fait-il ?

Générer les mises à jour DOM nécessaires au dom->diff-> virtuel

La plupart des opérations ici sont effectuées en js, car nous savons tous que les opérations dom sont très coûteuses. Ainsi, dans des circonstances normales, les performances de React sont toujours très bonnes.

2.3 flux de données

Le flux de données dans React circule dans une direction de haut en bas le long de l'arborescence des composants.

Le flux de données fait ici référence à la mise en œuvre d'une architecture d'application, par exemple, où les données sont stockées, où les événements sont déclenchés et comment répondre aux opérations des utilisateurs. Ce n'est pas une nouvelle fonctionnalité fournie par React, cela devrait être une pratique pour créer des applications avec React. Une fois que nous aurons compris Flux, il sera peut-être plus facile de comprendre le concept de flux de données.

2.4 Présentation de Flux

Flux est une idée d'architecture d'application fortement promue par le support React de Facebook. Il complète les composants de vue réutilisables de React avec un flux de données unidirectionnel.

Identique au flux de données de React. Dans l'architecture Flux, les données circulent également dans une seule direction :

En termes simples, tous les flux de données passeront par le répartiteur. . Les actions peuvent être générées par les créateurs d'actions et fournies aux répartiteurs, mais dans la plupart des cas, les actions sont générées par l'interaction de l'utilisateur avec les vues.

Capturez l'interaction de l'utilisateur au niveau de la couche View et générez une action En déclenchant le rappel d'événement enregistré sur le Dispatcher, le magasin concerné répond à l'action, puis l'événement onChange sur le magasin est déclenché pour une mise à jour ultérieure. la vue.

Le flux de données est toujours à sens unique, comme le montre la figure ci-dessus.

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!