react專案案例總結

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

// vue 

// jsx 
hello !{msg}

1. 在jsx裡面沒有指令,而且jsx裡面{}代表要執行的js語句,它的效果類似return,它會有回傳值.這樣的話,更好理解jsx的內容,jsx裡面的dom不是真正的dom,只是一種表示dom的語法,{}裡面的內容可以完全理解為js,這種整個jsx就可以完成理解為原生js寫的html模版.

2. 屬性計算的部分,vue裡面需要在屬性名稱前面加上:,在jsx裡面則不需要.

3. 另外,在vue裡面的dom的contentText不使用{{}}來渲染,使用因為在vue頁面產生之前,模版語法部分沒有渲染出來,就會在頁面上先出現{{content}},再一閃變成真正的文字內容.

#再舉個陣列遍歷渲染的栗子

// vue 
 
  
 
 // vue的methods属性 methods:{ showItem(item){ return item.label.indexOf('abc') !== -1 } }

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

你會發現,在一些比較簡單渲染需求時,使用vue的template會比較簡單直接,而且很易懂.但是如果涉及一些比較複雜的邏輯處理渲染,jsx更直觀,因為jsx的語法跟js的差異不大,相當於用js來描述需要如何渲染dom結構.當然jsx並不是說可以完成使用js的語法來寫dom,{}裡面只能是一個表達式,所以像if else或switch這種語法在{}是不能用的.

關於元件模版的格式化,在react裡面感覺更好一點,因為react元件就是用js寫的,格式化和註解部分在編輯器得到更好的支援,但是.vue檔案目前還找不到針對的格式化插件.
目前我遇到的問題有2個.

1.元件註解的問題.
在寫元件的時候,我比較習慣寫註解.在js檔案裡面,註解會更加的明顯和方便,但是在vue文件裡面註解感覺就沒啥親和力.

// .vue 

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

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

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

// .vue 

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

// .vue 

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

#相關建議：

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

React 16.3新特性分析

React 16.3之Context API詳情

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