Quelle est la différence entre réagir et vue ?

Le choix de vue se fait entre React et Angular. Le framework lui-même a un peu plus de syntaxe que React, mais un peu moins qu'Angular.

C'est précisément à cause des choix différents que les méthodes d'écriture et de réflexion présentées seront certainement différentes, qu'elles soient bonnes ou mauvaises, mais elles conduiront certainement à des préférences différentes.

La simplicité de React est que son API principale est en fait très petite. Nous verrons donc de nombreux endroits dire que React est en fait une bibliothèque d'interface utilisateur, pas un framework complet. Il nous explique simplement comment créer des composants et comment transférer des données entre composants. Même la façon de créer des composants consiste à utiliser la syntaxe de classe ES6 (createClass sera ignoré dans React 16).

Par conséquent, l'utilisation de React dans le développement dépend fortement de la syntaxe d'ES6. Parce que React lui-même n’a pas de syntaxe très restrictive. Nous avons seulement besoin de maîtriser les accessoires, l'état, la référence et le cycle de vie du composant. Il semble qu'il n'y ait pas beaucoup de connaissances supplémentaires. Même si vous souhaitez parcourir le rendu dans le modèle jsx, vous devez utiliser la méthode map native. Quant aux composants d'ordre supérieur de React, après les avoir compris, j'ai découvert que c'était en fait la façon de penser impliquée dans la programmation fonctionnelle JavaScript.

Donc, à mon avis, la plus grande caractéristique de React est qu'il est simple et très proche du JavaScript natif. C’est à dire qu’il apporte très peu de contraintes aux développeurs. Pour implémenter une fonction, si vous savez comment l'implémenter en utilisant JavaScript natif, alors vous pourrez facilement savoir comment l'implémenter en utilisant React.

Bien sûr, la simple API de base ne signifie pas qu'il est facile de démarrer. Au début de l'utilisation, si vous manquez d'expérience, les performances des pages que vous écrivez avec React peuvent être très mauvaises. Car involontairement, votre composant peut avoir beaucoup de rendu redondant.

Par exemple, lorsque de nombreuses personnes apprennent à réagir, elles rencontreront un exemple de compte à rebours. Cet exemple est implémenté en modifiant l'état dans le composant. Mais en fait, tout le monde se rendra progressivement compte que cette approche est tout à fait erronée. Parce que chaque modification d'état entraînera un nouveau rendu du composant et de tous ses sous-composants. C'est un comportement très coûteux. Bien sûr, je sais aussi que de nombreuses personnes, lors du débogage, gèlent directement le navigateur en raison du rendu répété à haute fréquence. Ces problèmes sont causés par un manque de restrictions qui inquiète You Yuxi.

Certaines personnes sur Internet qui pensent qu'elles sont géniales utilisent des frameworks comme React/Vue, mais écrivent en fait le même code. Ce qui fait peur, c'est qu'elles ridiculisent encore ceci et cela. J'ai également rencontré une personne qui n'arrêtait pas de dire qu'il utilisait Angular depuis de nombreuses années. Il disait qu'Angular était vraiment nul, que ses performances étaient si mauvaises et qu'il ne pouvait même pas utiliser Track. par. boire!

Et réagir n'a pas de véritable liaison bidirectionnelle. Par conséquent, il sera très difficile de gérer certains scénarios complexes, tels que la validation de formulaires complexes.

Relativement parlant, vue offre plus de fonctionnalités. Ces fonctionnalités pratiques rendront les débutants très heureux, car de nombreux effets peuvent être obtenus avec seulement quelques codes simples. Je vais probablement énumérer quelques fonctionnalités que je trouve personnellement géniales :

• Gestion unifiée des propriétés calculées

Les expressions JavaScript sont très pratiques, peu importe Qu'il s'agisse de Vue ou de React, la capacité à s'exprimer est essentielle. Mais comme le dit la documentation officielle de Vue, mettre trop de logique dans le modèle rendra le modèle trop lourd et difficile à maintenir. Le composant Vue fournit une propriété calculée pour gérer les expressions de manière uniforme.

<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: &#39;example&#39;,
    data () {return {message: &#39;Hello&#39;
        }
    },computed: {reversedMessage: function() {return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
        }
    }
}</script>

• La syntaxe dynamique de la classe me rend très heureux

Dans la pratique, nous trouverons de nombreux scénarios de ce type, qui doivent être basé sur différents états, déterminez la valeur spécifique d'une classe d'éléments. Et s'il n'y a que des expressions simples ou des jugements conditionnels dans le modèle jsx, par exemple, ce qui suit mettra les gens très mal à l'aise

<p className={active ? &#39;note active&#39; : &#39;note&#39;}></p>

Quand une logique légèrement plus complexe est gérée comme ça, ce sera insupportable. . La syntaxe prise en charge dans vue résout ce problème très facilement.

// 可以放在任何你觉得舒服的位置const pcls = {active: active,note: true
}

<p class={pcls}></p>

De cette façon, nous continuerons à ajouter plus de noms de classes sans entraîner de complexité supplémentaire.

Bien sûr, ce n'est qu'un problème qui peut être résolu avec une méthode outil. Lorsque vous utilisez React, vous pouvez utiliser des noms de classe pour remplir la même fonction. Mais vue le prend directement en charge.

• Liaison bidirectionnelle

Étant donné que React ne prend pas en charge la liaison bidirectionnelle, il est très pénible d'implémenter une validation de formulaire complexe . Bien que Vue prenne pour base le flux de données unidirectionnel, il n'abandonne pas complètement la liaison bidirectionnelle, ce qui rend l'efficacité du développement dans des scénarios de vérification de formulaire aussi complexes bien supérieure à celle de React. C'est aussi un aspect de vue qui évite les ennuis.

• Modificateur

Lorsque nous écrivons une logique de traitement d'événements, nous avons souvent besoin d'opérations telles que e.preventDefault. La fonction de modification fournie par vue peut nous aider à sauvegarder ces codes, ce qui est extrêmement pratique. Si vous l’utilisez davantage, vous constaterez qu’il est vraiment utile.

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><p v-on:click.capture="doThis">...</p><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><p v-on:click.self="doThat">...</p>

Bien sûr, il existe également des modificateurs clés, etc. Vous pouvez vous rendre sur le site officiel pour en savoir plus.

Vue propose de nombreux sucres syntaxiques pratiques et agréables, je n'entrerai donc pas dans les détails. Vous pouvez les découvrir un par un sur le site officiel. Comme mentionné au début de l'article, Vue aura certaines restrictions grammaticales, et ces restrictions grammaticales réduiront nos coûts de développement et amélioreront dans une certaine mesure l'efficacité du développement. C'est probablement pourquoi beaucoup de gens pensent que vue est plus simple et plus facile à apprendre.

En termes de facilité d'apprentissage, la principale raison pour laquelle React est plus difficile à démarrer n'est pas à cause de React lui-même, mais à cause du riche écosystème qui entoure React. Précisément parce que la réaction elle-même est assez simple, nous devons maîtriser davantage de composants de réaction. Tels que réagir-routeur, réagir-redux, etc. Et il existe de nombreux composants utiles dotés de fonctions intéressantes dont nous ne connaissions même pas l’existence alors que nous n’en connaissions pas grand-chose. Par exemple, lorsque j'étudie le code source d'ant-design, je suis souvent surpris de constater qu'il existe ici un composant qui peut être utilisé de cette manière. C'est vraiment génial ! Et quand j'apprenais Vue, j'ai été surpris de constater que Vue prend déjà en charge des composants aussi performants !

Plus tard, j'ai découvert que vue et réagir étaient si similaires.

Je préfère quand même réagir. Mais c'est juste parce que la syntaxe de React est plus proche de ES6

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!