React與Vue模板使用比較(1、vue模板與React JSX比較)

前言

本人原爲React開發者，如今轉戰Vue。在這些天接觸Vue的日子裏，說說本身的感受：一樣的爬山活動，React就像父親，給你必要的爬山工具就讓你出發了；Vue就像母親，在你爬山以前爲你準備好了全部東西，嘮嘮叨叨了一波，規劃了路線，給了你厚厚的導航指南，才讓你出發。

本文目的

• 方便React開發者更快的上手Vue
• 進行更加詳盡的React以及Vue的開發體驗比較

目標人羣

有必定的React開發經驗，正在並行使用Vue的開發者

問題

1. Vue的模板跟React中使用的jsx有什麼區別？
2. 如何在React中實現Vue模板上帶有的功能？

vue模板與JSX比較

1. 表達式（expressions）

JSX表達式用{}包裹，vue模板表達式用{{}}包裹，其他一致.

vue模板表達式：

代碼比較：

<!--vue-->
<template>
    <div>
      <p>I have a {{ product }}</p>
      <p>{{ product + 's' }}</p>
      <p>{{ isWorking ? 'YES' : 'NO' }}</p>
      <p>{{ product.getSalePrice() }}</p>
    </div>
</template>

<!--react-->
<div>
    <p>I have a { product }</p>
    <p>{ product + 's' }</p>
    <p>{ isWorking ? 'YES' : 'NO' }</p>
    <p>{ product.getSalePrice() }</p>
</div>
複製代碼

2.指令（directives）

Vue模板：小夥子，用你的頭髮記好了，有以下指令：

Vue模板指令：

JSX：啥啥啥，你本身實現不就行了嗎。。。

• v-if, v-else-if, v-else JSX直接用萬能的三元表達式
• v-show JSX在dom上添加以下代碼，實現同樣的功能

style={ifShow ？{} : { display: 'none' }}
複製代碼

• v-model JSX在對應的dom上綁定事件,事件裏面本身愛怎麼處理怎麼處理

代碼比較：

<!--vue指令-->
  <template>
    <div>
      <p v-if="container1">你如今看到container1了</p>
      <p v-else-if="container2">你如今看到container2了</p>
      <p v-else>你如今看到default了</p>
      <p v-show="ifShow">影響顯示的p</p>
      <input type="text" v-model="inputText"/>
    </div>
  </template>
  
  <!--react指令-->
  <div>
    {
      container1 ?
        <p>你如今看到container1了</p> :
        container2 ?
          <p>你如今看到container2了</p> :
        <p>你如今看到default了</p>
    }
    <p style={{display: ifShow ? 'block' : 'none'}}></p>
    <input type="text" onChange={val => () => {this.setState{inputText:val}}} 
           value={this.state.inputText}/>
  </div>
複製代碼

3. 列表渲染（list rendering）

Vue模板列表渲染：v-for React JSX: 直接在dom中插入map函數，裏面直接用js來處理參數

<!--vue-->
  <template>
    <ul>
      <li v-for="(item, i) in list" :key="item.id">{{item.text}}</li>
    </ul>
  </template>
  
  <!--react-->
  <div>
    <ul>
      {
        list.map((item, i) => <li key={item.id}>{item.text}</li>)
      }
    </ul>
  </div>
複製代碼

4. 綁定（binding）

綁定其實就是組件的傳參，經過綁定，將對應的參數傳遞到子組件。常見的綁定有：一、普通屬性綁定；二、style屬性綁定，三、class屬性綁定； Vue的數據綁定：

React JSX: 呵呵，style不是屬性啊？class不是屬性啊？弄那麼複雜幹嗎？！什麼？大家說咱們style不支持數組？你將數組轉換成對象就行了嗎？你說咱們class不支持對象以及數組？ classnames庫瞭解一下。

<!--vue綁定-->
<ul>
  <li :type="liType"></li>
  <!--style支持數組傳入-->
  <li :style="[{backgroundColor: '#fff'}]"></li>
  <!--style支持對象傳入 若是變量active爲true則添加對應的'active'類-->
  <li :style="{active}"></li>
  <!--class支持數組傳入 若是變量active爲true則添加對應的'active'類-->
  <li :class="[active]"></li>
  <!--class支持對象傳入 若是變量active爲true則添加對應的'active'類-->
  <li :class="{active}"></li>
</ul>
<!--react綁定-->
<ul>
  <li type={liType}></li>
  <!--style須要支持數組傳入？？本身用函數(將數組轉爲對象)處理吧-->
  <li style={this.arrayToObj([{backgroundColor: '#fff'}])}></li>
  <!--style支持對象傳入-->
  <li style={{backgroundColor: '#fff'}}></li>
  <!--class須要支持數組傳入？？本身用函數處理吧，函數都懶得寫？classnames庫瞭解一下-->
  <li className={this.arrayToString([{backgroundColor: '#fff'}])}></li>
  <!--class須要支持對象傳入？？本身用函數處理吧，函數都懶得寫？classnames庫瞭解一下-->
  <li className={classnames({active})}></li>
</ul>
複製代碼

5. 事件處理（actions/events）

Vue模板：記住了，有如下事件處理

JSX：跟js事件名稱一致，直接放置在對應的節點進行事件綁定就好

<!--vue-->
  <template>
    <button v-on:click="handleBtn">我是一個點擊按鈕</button>
  </template>
  
  <!--react-->
  <div>
    <button onClick={this.handleBtn}>我是一個點擊按鈕</button>
  </div>
複製代碼

總結

Vue模板與JSX的基本使用比較完了，Vue模板爲你考慮了不少優化的東西，你只須要記住其中的規則就好，更大的下降了技術門檻。而JSX將更大的控制權留給了代碼編寫者。

更新

• 2019.03.06 17:29 將v-model.lazy的做用更正爲：「當輸入框失去焦點後觸發change事件，纔會更改對應的綁定值」(感謝「朝陽羣衆-Leo」的指正)
• 2019.03.07 12:51 將「style={{ display: ifShow ? 'block':'none' }}」更正爲「style={ifShow ？{} : { display: 'none' }}」--須要考慮元素原來的display屬性，原來的方式會將原有的display屬性覆蓋,可能會影響佈局(感謝「Weijuer」的指正)