Différence entre déclaratif et impératif dans React.js?

Récemment, j’ai beaucoup étudié la fonctionnalité et les façons d’utiliser la bibliothèque JavaScript de Facebook React.js. En parlant de ses différences avec le rest du monde JavaScript, les deux styles de programmation declarative et imperative sont souvent mentionnés.

Quelle est la différence entre les deux?

Un style déclaratif, comme ce qui a réagi, vous permet de contrôler le stream et l’état dans votre application en disant: “Cela devrait ressembler à ceci”. Un style impératif change la donne et vous permet de contrôler votre application en disant: “C’est ce que vous devriez faire”.

L’avantage de la déclaration est que vous ne vous enlisez pas dans les détails d’implémentation de la représentation de l’état. Vous déléguez le composant organisationnel consistant à garder les vues de votre application cohérentes, vous devez donc vous préoccuper de l’état.

Imaginez que vous ayez un majordome, une sorte de métaphore pour un cadre. Et vous voudriez faire le dîner. Dans un monde impératif, vous leur diriez pas à pas comment préparer le dîner. Vous devez fournir ces instructions:

 Go to kitchen Open fridge Remove chicken from fridge ... Bring food to table 

Dans un monde déclaratif, il vous suffit de décrire ce que vous voulez

 I want a dinner with chicken. 

Si votre majordome ne sait pas fabriquer du poulet, vous ne pouvez pas opérer dans un style déclaratif. Tout comme si le backbone ne sait pas se muter pour effectuer une certaine tâche, vous ne pouvez pas lui dire de faire cette tâche. React peut être déclaratif car il “sait faire du poulet” par exemple. Par rapport à l’épine dorsale, qui ne sait que s’interfacer avec la cuisine.

Être capable de décrire l’état réduit considérablement la surface des insectes, ce qui est un avantage. D’un autre côté, vous pourriez avoir moins de flexibilité dans la façon dont les choses se produisent car vous déléguez ou soustrayez la manière dont vous implémentez l’état.

Imaginez un composant d’interface utilisateur simple, tel qu’un bouton “J’aime”. Lorsque vous appuyez dessus, il devient bleu s’il était précédemment gris et gris s’il était auparavant bleu.

La manière impérative de le faire serait:

 if( user.likes() ) { if( hasBlue() ) { removeBlue(); addGrey(); } else { removeGrey(); addBlue(); } } 

Fondamentalement, vous devez vérifier ce qui est actuellement à l’écran et gérer toutes les modifications nécessaires pour le redessiner avec l’état actuel, y compris annuler les modifications de l’état précédent. Vous pouvez imaginer à quel point cela pourrait être complexe dans un scénario réel.

En revanche, l’approche déclarative serait:

 if( this.state.liked ) { return ; } else { return ; } 

Étant donné que l’approche déclarative sépare les préoccupations, cette partie n’a besoin que de gérer la manière dont l’interface doit se présenter dans un état spécifique et est donc beaucoup plus simple à comprendre.

Code impératif:

Lorsque le code JavaScript est écrit impérativement, nous indiquons à JavaScript exactement quoi faire et comment le faire. Pensez-y comme si nous donnions des commandes JavaScript sur les étapes à suivre.

Par exemple, je vous donne l’humble pour la boucle:

 const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler'] const excitedPeople = [] for (let i = 0; i < people.length; i++) { excitedPeople[i] = people[i] + '!' } 

C'est un code impératif, cependant. Nous commandons JavaScript à chaque étape. Nous devons lui donner des commandes pour:

  1. définir une valeur initiale pour l'iterator - (soit i = 0)
  2. dire à la boucle for qu'elle doit s'arrêter - (i
  3. amener la personne à la position actuelle et append un point d'exclamation - (personnes [i] + '!')
  4. stocker les données dans la deuxième position dans l'autre tableau - (caractère excité [i])
  5. incrémenter la variable i par un - (i ++)

Code déclaratif:

Avec le code déclaratif, nous ne codons pas toutes les étapes pour nous amener au résultat final. Au lieu de cela, nous déclarons ce que nous voulons faire et JavaScript se chargera de le faire. Cette explication est un peu abstraite, alors regardons un exemple. Prenons l'impératif pour le code de boucle que nous examinions et le refactorisons pour qu'il soit plus déclaratif.

Avec le code impératif, nous effectuions toutes les étapes pour arriver au résultat final. Quel est le résultat final que nous voulons réellement, cependant? Eh bien, notre sharepoint départ était juste un tableau de noms:

 const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler'] 

Le but final que nous voulons est un tableau de même nom mais où chaque nom se termine par un point d'exclamation:

 ["Amanda!", "Geoff!", "Michael!", "Richard!", "Ryan!", "Tyler!"] 

Pour nous amener du début à la fin, nous utiliserons simplement la fonction .map () de JavaScript pour déclarer ce que nous voulons faire.

 const excitedPeople = people.map(name => name + '!') 

C'est tout! Notez qu'avec ce code, nous n'avons pas:

créé un object iterator dit au code quand il devrait cesser de fonctionner utilisé l'iterator pour accéder à un élément spécifique dans le tableau de personnes stocké chaque nouvelle chaîne dans le tableau Cependant, toutes ces étapes sont sockets en charge par JavaScript .map () Array méthode.

C’est une grande analogie:

* Une réponse impérative : Sortez de la sortie nord du parking et tournez à gauche. Prenez l’I-15 sud jusqu’à la sortie de l’autoroute Bangerter. Prenez à droite de la sortie, comme si vous alliez à Ikea. Allez tout droit et prenez à droite au premier feu. Continuez à travers la lumière suivante, puis prenez la prochaine à gauche. Ma maison est le # 298.

Une réponse déclarative : Mon adresse est 298 West Immutable Alley, Draper Utah 84020 *

https://tylermcginnis.com/imperative-vs-declarative-programming/

Il est préférable de comparer React (déclaratif) et JQuery (impératif) pour vous montrer les différences.

Dans React, il vous suffit de décrire l’état final de votre interface utilisateur dans la méthode render (), sans vous soucier de la transition entre l’état de l’interface utilisateur précédent et le nouvel état de l’interface utilisateur. Par exemple, changer le texte d’une étiquette de A à B.

 render() { ...   } 

D’autre part, JQuery vous oblige à effectuer une transition impérative de votre état de l’interface utilisateur, par exemple en sélectionnant l’élément label et en mettant à jour son texte.

 update() { ... $("#last-price-label").val(lastPrice); $("#ask-price-label").val(askPrice); } 

Dans le scénario réel, il y aura beaucoup plus d’éléments d’interface utilisateur à mettre à jour, ainsi que leurs atsortingbuts (par exemple, styles CSS et écouteurs d’événement). Si vous utilisez impérativement JQuery, cela deviendra complexe et fastidieux. il est facile d’oublier de mettre à jour certaines parties de l’interface utilisateur, ou d’oublier de supprimer d’anciens écouteurs (fuite de mémoire), etc. C’est ici que les bogues surviennent, c’est-à-dire que l’état de l’interface et le modèle ne sont pas synchronisés.

Les états désynchronisés n’arriveront jamais à l’approche déclarative de React, car il suffit de mettre à jour l’état du modèle, et React est responsable de la synchronisation de l’état de l’interface utilisateur et du modèle.

  • Sous le coup, React mettra à jour tous les éléments DOM modifiés en utilisant un code impératif.

Vous pouvez également lire ma réponse pour Quelle est la différence entre la programmation déclarative et impérative .

PS: à partir de l’exemple jQuery ci-dessus, vous pouvez penser à toutes les manipulations DOM dans la méthode update () et l’appeler à chaque fois que l’état de notre modèle change et que mon interface utilisateur ne sera jamais désynchronisée. Vous avez raison, et c’est effectivement ce que fait React render (), la seule différence est que jQuery update () provoquera de nombreuses manipulations inutiles, mais React ne mettra à jour que les éléments DOM modifiés en utilisant son algorithme de diffusion Virtual DOM .

  • Déclaratif vous permet de contrôler toutes les vues. (comme la gestion de l’état)
  • L’impératif vous permet de contrôler la vue. (comme $ (this))