// vue
<p :id="text" :class="{'active':isActive}" v-text="'hello! ' + msg"></p>

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

1. 在jsx里面沒有指令,而且jsx里面 {} 代表要執行的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文件目前還找不到針對的格式化插件.
目前我遇到的問題有2個.

1.組件注釋的問題.
在寫組件的時候,我比較習慣寫注釋.在js文件里面,注釋會更加的明顯和方便,但是在vue文件里面注釋感覺就沒啥親和力.

// .vue
<template>
<!--
  這里是注釋,而且沒有高亮效果.
 -->
</template>

// .js

這樣在js里面的注釋就顯得非常高大上.

2.dom部分格式化.
vue里面建議dom的每個屬性獨占一行(也是我的書寫習慣),像這樣:

// .vue
<p
  id="box1"
  class="classA classB"
  :class="{'active':isActive}"
></p>

但是,只要一格式化,就...

// .vue
<p id="box1" class="classA classB" :class="{'active':isActive}"></p>

而jsx里面就不會出現這種情況,只要是換行了,就算格式化也不會出現上述的問題.

相關推薦：

分解React組件的幾種進階方法

React 16.3新特性分析

React 16.3之Context API詳解

以上就是react項目案例總結的詳細內容，更多請關注php中文網其它相關文章！