Utilisation de React : cinq fonctionnalités majeures du framework React

Cet article vous présente l'utilisation de React : les cinq fonctionnalités majeures du framework React ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

01. Le contexte de l'émergence de React

Tout dans le monde a sa cause et son effet, et l'émergence d'un framework doit être indissociable d'un contexte spécifique de l'époque. Pour React, il y a deux contextes principaux qui doivent être mentionnés :

1. Une grande partie de la logique métier a été modifiée de l'implémentation back-end à l'implémentation front-end : Technologie AJAX L'émergence d'Internet a incité les gens à rechercher une expérience interactive Web plus fluide, entraînant la mise en œuvre d'un grand nombre de logiques métier complexes, du développement back-end au développement front-end. Cela a provoqué une augmentation géométrique du développement. quantité de code front-end. Les changements quantitatifs entraînent des changements qualitatifs. Comment organiser et gérer cette ampleur de code front-end ? Comment mieux améliorer les performances des applications ? S’appuyant sur des décennies d’expérience dans le développement back-end, il n’est pas surprenant que la solution consiste à utiliser un vaste framework front-end.

2. Pour les applications SPA avec une logique complexe, le framework front-end d'origine a des performances médiocres

    : Avant l'avènement de React, il y en avait déjà des matures comme et Cependant, les ingénieurs de Facebook ont ​​constaté que ces frameworks ne pouvaient pas apporter de bonnes performances aux pages face à des scénarios commerciaux complexes (tels que des opérations DOM fréquentes), ils ont donc prévu de développer leur propre framework pour résoudre ce problème. le framework développé est React, et la solution à ce problème est : utiliser le backbone.jsVirtual DOMAngular.js.

02. DOM virtuel

L'idée du DOM virtuel n'est en fait pas difficile à comprendre : nous savons que des opérations DOM fréquentes entraîneront beaucoup d'exécutions du navigateur. de calculs sur l'arborescence DOM. C'est le goulot d'étranglement de performances le plus important du front-end. Par conséquent, tant que nous pouvons fusionner plusieurs opérations DOM, puis « compléter le résultat en une seule opération » et effectuer des opérations

une fois

sur l'arborescence DOM en temps opportun, nous pouvons considérablement améliorer les performances frontales. . Pour React, la solution pour concrétiser cette idée est d'utiliser le

Virtual DOM

. Ce que nous appelons une arborescence DOM est en réalité un objet JavaScript imbriqué dans une structure arborescente. Dans le navigateur, les modifications apportées à l'arborescence DOM amèneront le navigateur à effectuer une série de calculs. Par conséquent, sur la base de la structure arborescente DOM existante, nous pouvons cloner une arborescence DOM identique, c'est-à-dire un « DOM virtuel », et toutes les modifications. sera inclus. Il est implémenté sur ce DOM virtuel, puis fusionné dans l'arborescence DOM du navigateur pour résoudre le goulot d'étranglement des performances mentionné précédemment. Bien qu'il ne soit pas difficile à comprendre, ce processus implique en réalité de nombreuses situations complexes et quelques difficultés algorithmiques, ce qui suffit à ouvrir un nouvel article pour l'expliquer.

03. Qu'est-ce que la composantisation ?

La composantisation est un modèle de conception de code, ce qui signifie que vous pouvez créer des fonctions simples dans une fonction plus complexe à utiliser.

La composantation présente deux fonctionnalités notables :

Encapsulation : les données requises par un composant sont encapsulées à l'intérieur du composant
Composition : un composant peut être combiné avec d'autres composants pour implémenter une logique métier plus complexe
La meilleure chose à propos de React est que tous les éléments de l'interface utilisateur de React sont des composants, et le composant n'est qu'un Fonction JavaScript. Mais par rapport à la fonction traditionnelle qui reçoit certains paramètres et renvoie une valeur, la fonction React recevra certains paramètres et renverra des éléments d'interface utilisateur dans l'interface.

Tout comme une bonne fonction doit être conforme au principe "DOT" (Do One Thing), un bon composant React ne peut pas mélanger la logique métier d'autres composants. Nous devons essayer de garder les composants React simples pour ceux qui sont complexes. peut La logique interne des composants React devient claire.

La formule suivante peut bien exprimer l'idée de composantisation de "la vue est le rendu des données" dans React :

De cette façon, dans React, une vue complexe est formée La méthode devient très simple :

UI = render(data)

Combiner des composants

 » plutôt que « Qu'est-ce que je veux que l'ordinateur fasse » pour réfléchir à la manière de répondre aux besoins de l'entreprise. Comparons brièvement la différence entre le « code déclaratif » et le « code impératif » :

Code impératif :

Je sens qu'il fait trop chaud, Écrivez code :

• Code déclaratif :
  Sentant qu'il fait trop chaud, écrivez le code :

  1. 拿起空调遥控器；
  2. 打开空调；
  3. 设置温度为 27 摄氏度；

• Regardez-le Il semble que le code déclaratif
  appelle simplement le code impératif encapsulé

  , mais en substance, il s'agit d'une meilleure réflexion en matière de programmation, qui nous permet de ne plus nous concentrer uniquement sur la façon de

  1. 调用“开空调(27)”函数；

  Réaliser des fonctions via le code
, mais réfléchissez davantage

Afin de réaliser la logique métier, quelles fonctions (fonctions) sont nécessaires dans le code

, en réfléchissant à la conception des fonctions et à la relation entre les fonctions, La logique du code est plus claire et plus ordonnée .

05. Flux de données unidirectionnel

Dans React, les données sont organisées sous la forme d'un arbre, circulant dans une direction de haut en bas (correspondant à l'arborescence DOM). Le flux de données est plus clair et l'état des composants est plus contrôlable;

Pour les applications d'une seule page avec une logique métier complexe, le front-end accepte une grande quantité de données, et La relation entre les données est également compliquée et React adopte le développement de composants. Différentes interfaces utilisateur changent en fonction des différentes données. Sans une méthode de gestion des flux de données claire et raisonnable, le code final ne peut être qu'un gâchis. l'interface utilisateur ou les données, il sera difficile de résoudre l'erreur. Où est la source ?

Compte tenu de cela, React utilise une approche de « flux de données unidirectionnel » qui permet uniquement aux données de circuler des éléments parents vers les éléments enfants.

Le mécanisme du flux de données unidirectionnel de React est à peu près le suivant : les données sont stockées sur le composant parent et descendent vers le composant enfant. Bien que les données soient stockées sur le composant parent, les composants parent et enfant peuvent utiliser ces données. Cependant, si les données doivent être mises à jour, seul le composant parent doit être mis à jour. Si le composant enfant doit modifier les données, il ne peut envoyer les données mises à jour qu'au composant parent, où les données sont réellement mises à jour. Une fois les données mises à jour par le composant parent, le composant enfant recevra les nouvelles données.

Le flux de données unidirectionnel peut sembler être un travail supplémentaire, mais il permet aux développeurs de comprendre plus facilement le fonctionnement de l'application.

06. Syntaxe JavaScript pure

Nous pouvons facilement ignorer cette fonctionnalité de React, c'est-à-dire que dans React, il n'y a pas de syntaxe React propriétaire spéciale qui doit être comprise et mémorisée, tous les composants, les opérations de données et la logique métier sont toutes implémentées à l’aide de la syntaxe JavaScript.

Cela signifie que si vous souhaitez utiliser React, il vous suffit de comprendre les idées de React et quelques API clés pour commencer à utiliser React afin de développer immédiatement des applications complexes. Et React vous encourage également à utiliser des idées de programmation fonctionnelle pour le développement. Vous pouvez utiliser n'importe laquelle de vos compétences en programmation fonctionnelle dans le développement de React.

07. Résumé

Dans cet article, nous avons d'abord parlé du contexte du framework React, puis avons expliqué les cinq caractéristiques majeures de React :

1. DOM virtuel ;

2. Componentisation ;

3. Code déclaratif

4. Flux de données unidirectionnel ; ;

5. Syntaxe JavaScript pure

Recommandations associées :

À propos de l'analyse de la boucle d'événements dans Node

Introduction aux composants React Native Echarts réactifs

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!