Maison >interface Web >js tutoriel >Résumé du cas du projet React
Quand j'ai commencé à écrire des composants, cela ne me semblait pas trop difficile (semblable à Vue). La chose la plus intéressante devrait être la syntaxe jsx Personnellement, je pense que jsx est effectivement plus fonctionnel que le modèle de vue et plus lisible
// vue <p :id="text" :class="{'active':isActive}" v-text="'hello! ' + msg"></p>
// jsx <p id={text} className={isActive && 'active'}>hello !{msg}</p>
dans jsx Il n'y a pas d'instructions. dedans, et {}
dans jsx représente l'instruction js à exécuter. Son effet est similaire à return
, et il aura une valeur de retour Dans ce cas, vous pourrez mieux comprendre le contenu de jsx. jsx n'est pas le vrai dom. C'est juste une syntaxe pour exprimer dom. Le contenu de {}
peut être complètement compris comme js. Ce jsx entier peut être compris comme un modèle html écrit en js natif.
:
apparaîtra d'abord sur la page, puis clignotera dans le texte réel content contentText
{{}}
{{content}}
// vue <ul> <li v-for="(item,index) in list" :key="index" v-if="showItem(item)"> <span v-text="item.label"></span> </li> </ul> // vue的methods属性 methods:{ showItem(item){ return item.label.indexOf('abc') !== -1 } }ne peut contenir qu'une seule expression, donc une syntaxe comme
// jsx <ul> {list.map((item,index) => { return item.label.indexOf('abc') !== -1 && ( <li key={index}> <span>{item.label}</span> </li> ) })} </ul>ou
ne peut pas être utilisée. dans {}
. if else
switch
Concernant le formatage des modèles de composants, ça se sent mieux dans React. C'est mieux, car le composant React est écrit en js, les parties de formatage et d'annotation sont mieux prises en charge dans l'éditeur, mais le {}
Le fichier ne trouve actuellement pas le plug-in de formatage correspondant.
.vue
1. Le problème des commentaires des composants.
Lors de l'écriture des composants, Je suis plus habitué à écrire des commentaires. Dans les fichiers js, les commentaires seront plus évidents et plus pratiques, mais dans les fichiers vue, les commentaires à l'intérieur semblent moins conviviaux.
// .vue <template> <!-- 这里是注释,而且没有高亮效果. --> </template>
// .js /** * @name * @param {Number} * @description */2. La partie dom est formatée.
En vue Il est recommandé que chaque attribut de dom soit sur sa propre ligne (c'est aussi mon habitude d'écrire), comme ceci :
Cependant, dès qu'il est formaté...
// .vue <p id="box1" class="classA classB" :class="{'active':isActive}" ></p>
Et jsx Cette situation ne se produira pas à l'intérieur Tant que la ligne est modifiée, le problème ci-dessus ne se produira pas. même s'il est formaté.
// .vue <p id="box1" class="classA classB" :class="{'active':isActive}"></p>Recommandations associées :
Plusieurs façons de décomposer les composants React Méthode de commande
Analyse des nouvelles fonctionnalités de React. 16.3
Explication détaillée de l'API contextuelle de React 16.3
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!