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”的指正)