# Vue,React, 微信小程序对比

无特殊说明这里的小程序都是微信小程序

# 模板语法

vue 模板语法

<h1>{{ msg }}</h1>
1

react jsx 模板语法

<h1>{ state.msg }</h1>
1

小程序模板语法

<view> {{ message }} </view>
1

# 数据绑定

vue

export default {
	data() {
		return {
			msg: 'vue 数据绑定'
		}
	}
}
1
2
3
4
5
6
7

react

class App extends React.Component {
	constructor() {
  	super()
    this.state = {
    	msg: 'react 数据绑定'
    }
  }
}
1
2
3
4
5
6
7
8

小程序和 vue 类似 不过 vue 是在 data 函数中返回

Page({
	data: {
  	msg: '小程序 数据绑定'
  }
})
1
2
3
4
5

# class 与 style 绑定

vue 绑定

<span :class={'hide': hide}></span>
data: {
  hide: true
}
1
2
3
4

react 绑定

const Item = () => {
  const [ red, setRed ] = useState('red')
	return <span className={red} style={{color: red}}></span>
}
1
2
3
4

小程序 绑定 和 vue 类似

<view class="{{ fixed ? 'sticky-fixed' : ''}}" style="{{ wrapStyle }}">
1

# 列表渲染

vue 列表

// Array 渲染 (数组元素,数组下标)
<p v-for="(item, index) in list" :key="index">{{index}} : {{ item }}</p>
// Object 渲染 (属性值, 属性, 下标)
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
1
2
3
4
5
6

react 列表

使用 map 函数循环

const List = () => {
	return (
    <ul>
      {
        list.map((item, index) => {
          return <li key={index}> { item } </li>
        })
      }
    </ul>
  )
}
1
2
3
4
5
6
7
8
9
10
11

小程序 列表

  • wx:for-item 指定数组当前元素名称
  • wx:for-item 指定数组下标名称
<view wx:for="list" wx:for-index="idx" wx:for-item="row" wx:key="idx">{{ row }}</view>
1

# 条件渲染

vue 条件

  • v-if DOM 元素没有渲染
  • v-show DOM 元素渲染
// v-if
<h1 v-if="isTrue">你看见了吗</h1>
<h1 v-else-if="isShow">我看见了</h1>
<h1 v-else>我看见了</h1>

// v-show
<h1 v-show="isTrue">你看见了吗</h1>
1
2
3
4
5
6
7

react 条件

利用 JavaScript 三目运算

const List = () => {
	return (
  	<div>
    {
    	isTrue ? <h1>渲染了</h1> : null
    }
    </div>
  )
}
1
2
3
4
5
6
7
8
9

小程序 条件渲染

<h1 wx:if="isTrue">你看见了吗</h1>
<h1 wx:elif="isShow">我看见了</h1>
<h1 wx:else>我看见了</h1>
1
2
3

# 事件处理

vue 事件绑定

事件处理方法 在methods上定义

<button @click="handleClick">btn</button>

methods: {
  handleClick() {
		console.log('按钮绑定')
	}
}
1
2
3
4
5
6
7

react 事件

通过 bind 改变 this 的指向

// 继承
class App extends React.Component {
  handleClick(e) {
  	console.log(e) // 事件
  }
	render() {
  	return <button onClick={this.handleClick.bind(this, '事件')}></button>
  }
}
// Hooks
const React, { useState } from 'react'
const Hook = (props) => {
  const [value, setVale] = useState('state')
	return (
  	<button onClick={e => {
    	setValue('改变State')
    }}></button>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

小程序

<view bind:tap="handleClick"></view>
// 方法定义在对象中
Page({
	handleClick(e) {
		console.log(e) // 元素的属性
	}
})
1
2
3
4
5
6
7

# 表单处理

vue 表单处理

v-model 指令在表单元素上创建双向数据绑定,同时可以在元素上绑定对应的事件

<input v-model="msg" @change="onChange">

...
data() {
	return {
		msg: ''
	}
},
methods: {
	onChange() {
		console.log(this.msg) // 输入对应的input value
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

react 表单处理

class Page extends React.Component {
    constructor() {
        super(...arguments)
        this.state = {
          name: ''
        }
    }
    handleChange(event) {
      this.setState({
        name: event.target.value // 通过表单元素中的 event 属性访问
      })
    }
    render() {
        return (
          <div>
            <input value={this.state.name} onChange={this.handleChange.bind(this)}></input>
          </div>
        );
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

小程序 表单处理

小程序 拥有自己的表单组件

<input value="{{ msg }}" bind:change="onChange" />

Page({
	data: {
		msg: ''
	},
	onChange(event) {
    const { detail: { value } } = event
    this.setData({
      msg: value
    })
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13

# 自定义组件

vue 组件

通常说的 vue 组件

  • .vue 文件就是一个组件
  • 通过 Vue.component() 挂载的组件
  • 组件通过 props 通信
  • 组件通过 $emit 通知父组件

详细的组件方法可以查考官网 (opens new window)

Vue.component('Item', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
1
2
3
4

react 组件

react 中每个函数都可以成为一个组件

  • 通信都是通过 props
const Item = props => {
	return <h3>{ props.title }</h3>
}
1
2
3

小程序 组件

小程序需要通过 Component (opens new window) 构造器来定义组件

Component({
  behaviors: [],
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  data: {},
  methods: {}
})
1
2
3
4
5
6
7
8
9
10
11
12

# 生命周期

Vue React 小程序
beforeCreate(初始化之前) componentWillMount
(组件即将被渲染到页面之前)
onLoad(页面开始创建时)
created(完成初始化)
beforeMount(挂在$el前)
mounted(挂在dom后) componentDidMount
(组件已被渲染;可以操作dom元素)
onShow(页面出现在前台)
onReady(页面首次渲染完成)
beforeUpdate(更新已完成,但未更新dom) componentWillUpdate
(组件被更新前触发)
updated(dom元素已更新) componentDidUpdate
(更新完后触发;产生新dom元素)
beforeDestory
(组件被销毁前触发)
componentWillUnmount
(组件被销毁完毕后触发)
onHide(页面从前台到后台)
destoryed
(组件被销毁完毕后触发)
onUnload(页面销毁时)

# 路由

wx.switchTab // 只能跳转到tab页面,并关闭其他所有非 tabBar 页面
wx.reLaunch // 关闭所有页面,打开到应用内的某个页面
wx.redirectTo // 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo // 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.navigateBack // 关闭当前页面,返回上一页面或多级页面
1
2
3
4
5

# 状态管理

vue 状态管理 Vuex (opens new window)

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    increment (state) {
      state.num++
    }
  }
})

store.commit('increment')

console.log(store.state.num) // 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

React 状态管理

React 中的状态管理工具有 Redux (opens new window),Mobx 等,这里用 react-redux 来示范;文中代码具体可见 react-test (opens new window)

  • 创建 action
export const insert = (id) => ({
  type: 'INSERT',
  payload: {
    id
  }
})
1
2
3
4
5
6
  • 创建 reducers
const initState = [
  {
    id: 1,
    title: "西游记",
    author: "吴承恩",
    star: 55
  }
]

export default (state = initState, action) => {
  switch (action.type) {
    case 'INSERT':
      return state.map(v => {
        if (v.id === action.payload.id) {
          v.star++
        }
        return v
      });
    default:
      return state;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

创建 store

import { createStore } from 'redux'
import rootReducer from './reducers'

export default createStore(rootReducer)
1
2
3
4
  • 视图更新
// views/Redux.js
import React, { useState } from 'react'
import { insert } from './../store/actions/books'

const ReduxPage = props => {
    const state = props.getState().books
    const [books, setBooks] = useState(state)
    const add = (id) => {
        props.dispatch(insert(id))
        setBooks(props.getState().books)
    }
    return (
      <div>
        ...
					<button onClick={add.bind(this, book.id)}>+</button>
      	...
      </div>
    );
};

export default ReduxPage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

小程序状态管理

小程序能使用 App 挂在全局对象来做状态管理,以及可以使用小程序自有的 Storage (opens new window) 本地客服端缓存来对全局的状态进行管理

更新于: 3/3/2020, 8:00:53 AM