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.
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 :
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.
: 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.
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 composantation présente deux fonctionnalités notables :
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)
» 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é
1. 调用“开空调(27)”函数；
, 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 . 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. 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. Dans cet article, nous avons d'abord parlé du contexte du framework React, puis avons expliqué les cinq caractéristiques majeures de React : DOM virtuel ; Componentisation ; Code déclaratif Flux de données unidirectionnel ; ; Syntaxe JavaScript pure Recommandations associées : 05. Flux de données unidirectionnel
06. Syntaxe JavaScript pure
07. Résumé
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
