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="{&#39;active&#39;:isActive}" v-text="&#39;hello! &#39; + msg"></p>

// jsx
<p id={text} className={isActive && &#39;active&#39;}>hello !{msg}</p>

1. 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.

calcul de l'attribut Pour la pièce, vous devez ajouter
2. devant le nom de l'attribut dans Vue, mais pas dans jsx

   :

De plus, le <.> de dom dans Vue n'utilise pas
3. Pour le rendu, utilisez car avant que la page vue ne soit générée, la partie syntaxe du modèle n'est pas rendue et

   apparaîtra d'abord sur la page, puis clignotera dans le texte réel content contentText{{}}{{content}}

   Prenons un autre exemple de rendu par traversée de tableau

Vous constaterez cela lorsqu'il s'agit de certaines exigences de rendu relativement simples, en utilisant vue. Le modèle sera plus simple, plus direct et facile à comprendre. Mais s'il implique un traitement logique et un rendu plus complexes, jsx est plus intuitif, car la syntaxe de jsx n'est pas très différente de celle de js. js pour décrire comment restituer la structure dom. Bien sûr, jsx ne signifie pas que vous pouvez écrire dom en utilisant la syntaxe de js

// 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 elseswitch 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.

Ce que j'ai rencontré jusqu'à présent Il y a deux problèmes.

.vue1. 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.

Les commentaires dans js semblent très élevés. -end.

// .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="{&#39;active&#39;: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="{&#39;active&#39;: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!