Reagieren Sie auf die Zusammenfassung des Projektfalls

Als ich anfing, Komponenten zu schreiben, fühlte es sich nicht allzu schwierig an (ähnlich wie bei Vue). Das Interessanteste dürfte die jsx-Syntax sein. Ich persönlich bin der Meinung, dass jsx tatsächlich funktionaler ist als die Vorlage von vue und besser lesbar ist.

// 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. Anweisungen darin, und {} in jsx stellt die auszuführende js-Anweisung dar. In diesem Fall ist es besser, den Inhalt von jsx zu verstehen dom in jsx ist nicht das eigentliche dom. Der Inhalt in return kann vollständig als in nativem js geschriebene HTML-Vorlage verstanden werden 🎜>{}

   Attributberechnung Für das Teil müssen Sie
vor dem Attributnamen in vue hinzufügen, jedoch nicht in jsx> Darüber hinaus Das
2. von dom in Vue verwendet nicht

   Zum Rendern verwenden, da der Vorlagensyntaxteil vor der Generierung der Vue-Seite nicht gerendert wird und : zuerst auf der Seite angezeigt wird und dann in die Seite eingeblendet wird echter Textinhalt.

3. Nehmen wir ein weiteres Beispiel für das Array-Traversal-RenderingcontentText{{}}{{content}}

   Sie werden feststellen, dass, wenn es um einige relativ einfache Rendering-Anforderungen geht, Die Verwendung der Vue-Vorlage ist einfacher, direkter und leichter zu verstehen. Für eine komplexere Logikverarbeitung und -wiedergabe ist jsx intuitiver, da sich die Syntax von jsx nicht wesentlich von der von js unterscheidet Die Verwendung von js zum Rendern der Dom-Struktur bedeutet natürlich nicht, dass Sie Dom mit der Syntax von js schreiben können, sodass
nur einen Ausdruck enthalten kann in

verwendet werden. In Bezug auf die Formatierung von Komponentenvorlagen fühlt es sich in React besser an, da die React-Komponente in js geschrieben ist und die Formatierungs- und Anmerkungsteile im Editor besser unterstützt werden. aber die

Datei kann derzeit das Formatierungs-Plug-in nicht finden

Was mir bisher aufgefallen ist Es gibt zwei Probleme.

// 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
  }
}

// jsx
<ul>
  {list.map((item,index) => {
    return item.label.indexOf('abc') !== -1 && (
      <li key={index}>
        <span>{item.label}</span>
      </li>
    )
  })}
</ul>

Das Problem der Komponentenkommentare.

Beim Schreiben Komponenten, ich bin es eher gewohnt, Kommentare in js-Dateien zu schreiben, aber in vue-Dateien fühlen sich die Kommentare darin weniger freundlich an.{}if elseswitch{}Die Kommentare in js sehen aus Sehr hochwertig.

2. Der Dom-Teil ist formatiert..vueIn vue Es wird empfohlen, dass jedes Attribut von Dom in einer eigenen Zeile stehen sollte (dies ist auch meine Schreibgewohnheit), wie folgt:

Sobald es jedoch formatiert ist...

// .vue
<template>
<!--
  这里是注释,而且没有高亮效果.
 -->
</template>

Und jsx Diese Situation wird im Inneren nicht auftreten, solange die Zeile geändert wird Tritt nicht auf, auch wenn es formatiert ist.

// .js
/**
 * @name
 * @param {Number}
 * @description
 */

Verwandte Empfehlungen:

Mehrere Möglichkeiten, React-Komponenten zu zerlegen. Bestellmethode

// .vue
<p
  id="box1"
  class="classA classB"
  :class="{&#39;active&#39;:isActive}"
></p>

Analyse neuer Funktionen von React 16.3

// .vue
<p id="box1" class="classA classB" :class="{&#39;active&#39;:isActive}"></p>

Detaillierte Erläuterung der Kontext-API von React 16.3

Das obige ist der detaillierte Inhalt vonReagieren Sie auf die Zusammenfassung des Projektfalls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!