react專案案例總結

剛開始寫組件的時候，感覺難度不大（跟vue差不多）。最有趣的應該是jsx語法，個人感覺，jsx的功能性確實比vue的template更強,而且可讀性更高.

// 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裡面{} 代表要執行的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
/**
 * @name
 * @param {Number}
 * @description
 */

這樣在js裡面的註解就顯得非常高大上.

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

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

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

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

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

#相關建議：

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

React 16.3新特性分析

React 16.3之Context API詳情

#######################################################################################################################################################

以上是react專案案例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！