Que peut faire le framework React ? Introduction détaillée au framework React (avec des exemples d'utilisation complets)-js tutoriel-php.cn

Reactest un framework JavaScript permettant de créer des interfaces utilisateur Web « prévisibles » et « déclaratives », qui a permis à Facebook de développer des applications Web plus rapidement. Jetons un coup d'œil au contenu de l'article

1. Caractéristiques :

1 Décrivez simplement votre candidature à tout moment Quoi. il devrait ressembler à ce que React gérera automatiquement les mises à jour de l'interface utilisateur lorsque les données changent.

2. Déclaratif Lorsque les données changent, React revient conceptuellement à cliquer sur F5. En fait, il ne met à jour qu'une partie du changement. React consiste à créer des composants réutilisables. En fait, avec React, tout ce que vous faites est de créer des composants. L'encapsulation facilite la réutilisation, les tests et la séparation du code des composants.

De plus, il y a les points suivants à noter :

React n'est pas un framework MVC

React n'utilise pas de modèles

La mise à jour responsive est très simple

Grands principes

Pour le web traditionnel. applications, l'exploitation du DOM est généralement une opération de mise à jour directe, 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 fournit un moyen différent et puissant de mettre à jour le DOM au lieu des opérations directes du DOM. Il s'agit duVirtual DOM

, un DOM virtuel léger, qui est un objet abstrait par React, décrivant à quoi devrait ressembler le dom et comment il doit être présenté. Le vrai DOM est mis à jour via ce Virtual DOM, et ce Virtual DOM gère la mise à jour du vrai DOM.

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.

Composants Composants

Les nœuds de l'arborescence DOM sont appelés éléments, mais ici c'est différent, Virtual DOM It est appelé composant. Le nœud de Virtual DOM est un composant abstrait complet, composé de composants.

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

État et rendu

Comment React présente le vrai DOM, comment restituer les composants, quand effectuer le rendu et comment mettre à jour de manière synchrone, cela nécessite une brève compréhension de l'état et Rendu rendu. L'attribut state contient certaines données nécessaires pour définir le composant. Lorsque les données changent, Render sera appelé pour effectuer un nouveau rendu. Ici, les données ne peuvent être mises à jour que via la méthode setState fournie

Tout d'abord, jetez un œil. sur la démo du site officiel :

Copier après la connexion

C'est très simple Lorsque vous y accédez avec un navigateur, vous pouvez voir les mots Hello, world !.JSXTransformer.js prend en charge l'analyse de la syntaxe JSX. JSX est une syntaxe qui peut écrire du code HTML en Javascript. Si vous ne l'aimez pas, React fournit également des méthodes Javascript natives.(Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinoisColonne React Reference Manual

pour en savoir plus)

Une autre démo :

Hello React

Copier après la connexion

Effet :

Que peut faire le framework React ? Introduction détaillée au framework React (avec des exemples dutilisation complets)