反応プロジェクト事例の概要

初めてコンポーネントを書き始めたときは、それほど難しくは感じませんでした (Vue と同様)。最も興味深いのは、jsx 構文です。個人的には、jsx は vue のテンプレートよりも機能的で読みやすいと感じています。

// 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. jsx には命令がなく、jsx /code には {} は実行される js ステートメントを表します。その効果は戻り値を持つ <code>return と似ています。この場合、jsx の dom はそうではありません。本物の dom ですが、dom を表現する単なる A 構文であるため、{} の内容は完全に js として理解でき、jsx 全体はネイティブ js で書かれた html テンプレートとして理解できます。{} 代表要执行的js语句,它的效果类似 return ,它会有返回值.这样的话,更好理解jsx的内容,jsx里面的dom不是真正的dom,只是一种表示dom的语法,{}里面的内容可以完全理解为js,这种整个jsx就可以完成理解为原生js写的html模版.

2. 属性计算的部分,vue里面需要在属性名前面加:,在jsx里面则不需要.

3. 另外,在vue里面的dom的contentText不使用{{}}来渲染,使用因为在vue页面生成之前,模版语法部分没有渲染出来,就会在页面上先出现{{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
  }
}

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

你会发现,在一些比较简单渲染需求时,使用vue的template会比较简单直接,而且很易懂.但是如果涉及一些比较复杂的逻辑处理渲染,jsx更直观,因为jsx的语法跟js的差异不大,相当于用js来描述需要如何渲染dom结构.当然jsx并不是说可以完成使用js的语法来写dom,{}里面只能是一个表达式,所以像if else或者switch这种语法在{}是不能用的.

关于组件模版的格式化,在react里面感觉更好一点,因为react组件就是用js写的,格式化和注释部分在编辑器得到更好的支持,但是.vue

属性の計算 部分的に、vue では属性名の前に : を追加する必要がありますが、jsx では追加する必要はありません。

さらに、 vue の dom の contentText は、レンダリングに {{}} を使用しません。vue ページが生成される前にテンプレート構文部分がレンダリングされないため、{{content}} が最初にページに表示され、その後、実際のテキスト コンテンツが表示されます。<p></p> <blockquote>配列トラバーサル レンダリングの別の例</blockquote> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// .vue &lt;template&gt; &lt;!-- 这里是注释,而且没有高亮效果. --&gt; &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// .js /**  * @name  * @param {Number}  * @description  */</pre><div class="contentsignin">ログイン後にコピー</div></div> vue for を使用すると、それがわかります。比較的単純なレンダリングが必要な場合 テンプレートは比較的シンプルかつ直接的で理解しやすいですが、より複雑なロジック処理とレンダリングが必要な場合は、jsx の構文が js の構文とあまり変わらないため、jsx の方が直感的です。これは、js を使用して dom 構造をレンダリングする方法を記述するのと同じです。もちろん、jsx は、js 構文を使用して dom を記述できるという意味ではありません。したがって、if else または switch code> この構文は <code>{} では使用できません

コンポーネント テンプレートの書式設定に関しては、react の方が良いと思います。コンポーネントは js で記述され、フォーマットされ、注釈が付けられます。一部の部分はエディターでより適切にサポートされていますが、.vue ファイルのフォーマット プラグインがまだ見つかりません

現在、2 つの問題が発生しています。

1. コンポーネントのコメント 質問です。

コンポーネントを書くときは、js ファイルの方がコメントがわかりやすくて便利ですが、vue ファイルのコメントは親しみにくいように感じます。 js 内のコメントは非常にエレガントです。

2. dom 部分をフォーマットします。

vue では、次のように dom の各属性を独自の行に配置することをお勧めします。フォーマットされているので...

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

これは、jsx では発生しません。フォーマットされていても、改行であれば、上記の問題は発生しません。 関連する推奨事項:

いくつかの高度なメソッドReactコンポーネントの分解方法

React 16.3の新機能分析

React 16.3 Context APIの詳細説明🎜🎜🎜🎜🎜

以上が反応プロジェクト事例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。