Vue和React最大的区别,全网仅此一篇

本文只探讨区别,不论优劣.(本人当前公司用的也是vue)
一句话,react(hooks)提供了更底层的组件实现形式,而vue组件受制于模板的限制.

首先,在vue中,组件一旦注册了,那么,以此命名的组件将无法删除和重写,
即注册了某个组件A

let compObjA={
	functional:true,
	render:function(createElement,context){//A的逻辑} //不详细写了
}
Vue.component("A",compObjA); //注册了A组件
let compObjB={
	functional:true,
	render:function(createElement,context){//B的逻辑} //不详细写了
}
Vue.component("A",compObjB); //还是注册了A组件
//无法覆盖已注册的A组件,也就是说,注册好的组件就是一个写死的函数(vue实例)

上实际的例子
比如,实现一个组件App

<template>
<div>测试</div>
</template>
<script>
export default{
	name:"App"
}
</script>

突然,我要对App传入一个函数clickFun,并且绑定在测试div的click事件上

<template>
<div @click="clickFun">测试</div>
</template>
<script>
export default{
	name:"App",
	props:{
		clickFun:{
			type:Function,
			defaultValue:function(){}
		}
	}
}
</script>

突然,我又有需求,要对App传入一个函数mouseEnterFun,并且绑定在测试div的mouseEnter事件上

<template>
<div @click="clickFun" @mouseEnter="mouseEnterFun">测试</div>
</template>
<script>
export default{
	name:"App",
	props:{
		clickFun:{
			type:Function,
			defaultValue:function(){}
		},
		mouseEnterFun:{
			type:Function,
			defaultValue:function(){}
		}
	}
}
</script>

最后…我有个需求(动态事件),用户传入eventsProps类似{click:function(){}}这样的props,来实现对应测试div上的各种事件
完了哇

<template>
<div @click="eventFun($event,'click')" @mouseEnter="eventFun($event,'mouseEnter')"
..........太多了,不想写了
>测试</div>
</template>
<script>
export default{
	name:"App",
	props:{
		eventsProps:{
			type:Object,
			defaultValue:{}
		}
	},
	methods:{
		eventFun($event,type){
			if(this.eventsProps[type]){
				this.eventsProps[type]($event);
			}
		}
	}
}
</script>

当然,vue还有种实现方式,就是写一个组件工厂函数,然后每次(有不同的eventsProps需要)都生成一个随机组件名的组件并注册使用,这个,貌似,更复杂来着
比如

function componentFactory(compName,obj){
	Vue.component(compName,obj);
}

然后看一下react(hooks)的实现吧
为啥是reacthooks,因为它的函数式组件支持内部状态具体用法网上五花八门,此处,我这儿仅仅实现传入{click:function(){}}这样的props,来实现对应测试div上的各种事件

function comp(props){
	//状态之类的使用useState,此处不赘述了
	return React.CreateElement("div",props,"测试");
}

以上函数,调用一次,就是一个组件,传入props为{onClick:function(){}},就可以实现各种事件随心配,当然,使用的话需要外部构建全局函数式组件,请参考我后续的博文.

以上有啥说的不对的,或者动态事件vue有没有更好的实现,欢迎留言执教,谢谢.