盘点Vue和react的区别

盘点Vue和react的区别

react和Vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的,使用react和Vue,主要是理解他们的设计思路的不同。

1、数据是不是可变的

react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据的不可变。react在setSate之后会重新走渲染的流程,如果shouldComponent就是重写了shouldComponentUpdate,然后在里面做了props和state的千层对比。

react的生命周期

而Vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当数据变化的是时候,响应式的更新对应的虚拟dom。

Vue生命周期

总之,react的性能优化需要手动去做,而Vue的性能优化是自动的,但是Vue的响应式机制也有问题,就是state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控。

2、通过js来操作一切,还是用各自的处理方式

react的思路是 all in js,通过js来生成HTML,所以设计了jsx,还有通过js来操作css,社区的styled-component,jss等。

import React from 'react'
import {render} from 'react-dom'
import injectSheet from 'react-jss'
//creat your Styles. Remember,since React-JSS users the default  preset,
//most plugins are availble without further configeration needed.
const styles={
	myButton:{
		color:'green',
		margin:{
			top:5,
			right:0,
			bottom:0,
			left:'1rem'
		},
		'& span':{
			fontWeight:'bold'
		}
	},
	mylabel:{
		fontStyle:'italic'
	}
		
}

const Button=({classes,children})=>{
	<button className={classes.myButton}>
	<span className={classes.myLabel}>
	{children}
	</button>
}
const StyleButton = injectSheet(styles)(Button)

Vue是把HTML,CSS,JS组合在一起,用各自的处理方式,Vue有单文件,可以吧HTML、css、js写到一个文件中,HTML提供了模板引擎来处理。

<template>
			<p>{{greeting }}World!</p>
		</template>
		<script>
			module.exports={
				data:function(){
					return{
						greeting:'hello'
					}
				}
			}
		</script>
		<style scoped>
			p{
				font-size: 2rem;
				text-align: center;
			}
			
		</style>

3.类式的组件写法,还是声明式的写法

react是类式的写法,api很少,

class InputControlES6 extends React.Component{
	constructor(props){
		super(props);
		
		//设置initial state
		this.state={
			text:props.initialValue ||'placeholder'
		};
		//ES6类中的函数必须手动绑定
		this.handleChange =this.handleChange.bind(this);
	}
	handleChange(event){
		this.setState({
			text:event.target.value
		});
	}
	render(){
		renturn(
		<div>
		Type something:
		<input onChange={this.handleChange}
		value={this.state.text}/>
		</div>
		);
	}
}
InputControlES6.propTypes={
	initialValue:React.propTypes.string
};
InputControlES6.defaultProps={
	initialValue:''
};

而Vue是声明式的写法,通过传入各种options,api和参数都很多。所以react结合typescript更容易一起写,Vue稍微复杂。

<script>
			var todoItem=Vue.extend({
				template:`<li>{{text}}<li>`,
				props:{
					text:{
						type:String,
						default:''
					}
				}
			})
		</script>

Vue结合vue-class-component也可以实现类式的写法,但是还是需要通过decorator来添加声明,并不纯粹。

在这里插入图片描述
react可以通过高阶组件(Higher Order Components–HOC)来扩展,而vue需要通过mixins来扩展
一个react高阶组件的例子:

在这里插入图片描述
在这里插入图片描述
vue的mixin的例子:

在这里插入图片描述
React刚开始也有mixin的写法,通过React.createClass的api,不过现在很少用了。
Vue也不是不能实现高阶组件,只是特别麻烦,因为Vue对与组件的option做了各种处理,想实现高阶组件就要知道每一个option是怎么处理的,然后正确的设置。具体有多复杂,可以参考下面的文章。

http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/

4.什么功能内置,什么交给社区去做

react做的事情很少,很多都交给社区去做,vue很多东西都是内置的,写起来确实方便一些,
比如 redux的combineReducer就对应vuex的modules,
比如reselect就对应vuex的getter和vue组件的computed,
vuex的mutation是直接改变的原始数据,而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能,vue不需要。

总结

上面主要梳理了react和vue的4点不同:

数据是不是可变的
通过js操作一切还是各自的处理方式
类式的组件写法还是声明式的写法
什么功能内置,什么交给社区去做
(其中第3点在vue3.0支持类式写法之后就可以去掉了)

react整体的思路就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,而vue是基于可变数据的,支持双向绑定。react组件的扩展一般是通过高阶组件,而vue组件会使用mixin。vue内置了很多功能,而react做的很少,很多都是由社区来完成的,vue追求的是开发的简单,而react更在乎方式是否正确。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值