react-vue,前端vue react
React之所以在中后台项目中得到认可，是因为它在处理复杂的业务逻辑或组件重用方面比vue更优雅，但也需要更好的整体团队技术。领导大佬的设计和把关能力更好，所以开发成本更高。下面文章会详细介绍，有需要的朋友可以参考一下。
:
目录
1.全景2。背景1。反应：特长2。vue:传说3。技术思路1。key的异同为例1.1 react1.2 vue2、diff的宏比较2.1 react2.2 vue3、life cycle 3.1 react life cycle 3.2 vue life cycle 4、函数式编程4.1 react hooks4.2 vue3组合api5、事件处理(@ click vs onclick)5.1 vue 5.2 react 6、组件化7、构建工具8、其他5、family bucket
一、全景图
二、背景
1、react：专业
React诞生于2011年(FaxJS)，
2013年7月3日v0.3.0
2016年3月30日v0.14.8
2016年4月9日v15.0.0
2017年9月27日，v16.0.0，光纤正式诞生。
2019年，react 16.8发布，正式支持hooks语法。
2020年10月22日v17
解决问题：
官网上说：我们构建React是为了解决一个问题：用随时间变化的数据构建大型应用。
2、vue：传奇
个人项目起源于2013年，现在已经成为全球三大前端框架之一，是中国大陆的首选。(面试官问：你为什么学会用vue？答：因为爱国！)
2013年，在谷歌工作的尤雨溪受到Angular的启发，从中提取自己喜欢的部分，开发了一个轻量级框架，最初命名为Seed。
同年12月，这颗种子发芽，改名为vue(因为是视图图层库，Vue是法语视图的意思)，版本号为0.6.0。
2014年1月24日，Vue正式发布，版本号为0.8.0。
2014年2月25日0.9.0发布，有自己的代号：Animatrix，来自《骇客帝国》的动画版。从此以后，重要的版本都会有自己的代号。
2015年6月13日发布0.12.0，代号龙珠。今年，Vue迎来了大爆发。Laravel社区(一个流行的PHP框架社区)第一次使用Vue，Vue也在JS社区获得了人气。
1.0.0 Evangelion(新世纪福音战士)是Vue历史上的第一个里程碑。同年，vue-router(2015-08-18)、vuex(2015-11-28)、vue-cli(2015-12-27)相继发布，标志着vue从视图层库发展到了渐进式框架。很多前端的同学也从这个版本开始成为了Vue的用户(vue1纯属响应)。
2016年10月1日2.0.0《蛋壳里的幽灵》(Ghost in the Shell)是第二个重要的里程碑。它吸收了React的虚拟Dom方案，也支持服务器端渲染。
2019年2月4日，在2.6发布之前很久，Vue的核心团队就在忙着开发vue-cli3.0，积累了很多需求，发布了vue2的倒数第二个版本(2020年发布)。
2020年09月18日vue3的使命是成为一个任何人都可以快速学习的无障碍框架。同年还推出了新时代打包工具vite(未来可能取代webpack)
vue群众基础图 如下图：
三、技术思想
React作为一个整体是一个功能性的想法。组件使用jsx语法，全部用js，所有html和css都集成到javaScript中。jsx语法相对更灵活。
vue的整体思路仍然是拥抱经典html(结构)css(性能)js(行为)的形式。vue鼓励开发者使用模板template，并提供v-if、v-show、v-for等开发者使用说明。所以在开发vue应用的时候，会有一种写经典web应用的感觉(结构、性能、行为分离)。
一些老生常谈的数据管理(道具、数据vs状态)、组件编写、生命周期的异同这里就不做比较了。
1、key的异同为例
1.react和vue在列表中添加key的最终目的是一样的：更准确更快速的获取oldVnode中对应的vnode节点，提高性能。然而，它们的算法是不同的。
1.1 react
React渲染数组时，如果子组件不提供键，默认情况下，它会使用循环的索引作为第一次渲染的键。源代码本质上是一种蛮力比较法：由于单链表纤程无法使用双指针算法，所以无法使用双指针优化算法。一般有两轮遍历，第一轮遍历：处理更新后的节点。第二轮遍历：处理不属于更新的剩余节点。
为了降低算法的复杂度，React的diff会预设限制条件：
仅区分同级元素。如果一个DOM节点在前两次更新中跨越了层次结构，那么React不会尝试重用它。
两种不同类型的元素会产生不同的树。如果元素从div变为p，React将销毁div及其后代，并创建新的p及其后代。
先判断关键再判断类型。如果相同，则为同一节点。添加/删除
1.2 vue
Vue在diff性能上优于react。当我仔细阅读源代码和书籍时，我印象极其深刻。以最长递增子序列为例：以数组[2，11，6，8，1]为例：最终输出结果为[0，2，3]，表示最强递增序列的索引分别为0，2，3；对应的值是2、6和8。换句话说，这个数组中最长的连续递增值是数组中的两个、六个和八个元素。
那么vue3花了这么大力气之后，使用这种方法的目的是什么呢？在DOM-Diff过程中，Vue2优先考虑特殊场景，比如头对头比较、头对头比较、尾对头比较。
在DOM-Diff过程中，Vue3根据newIndexToOldIndexMap中新老节点的索引列表，找到最长的稳定序列，通过最长增长子序列的算法比较，找出新老节点中不需要移动的节点，并就地复用，只对需要移动或已经打补丁的节点进行操作(添加和删除节点等)。)，从而最大限度提高替换效率。相比Vue2版本，是质的提升！
2、diff的宏观比较
2.1 react
在react中，如果组件的状态发生变化，react将重新渲染该组件及其所有后代。但是，重新渲染并不意味着所有最后的渲染结果都会被丢弃。react仍然会通过diff将虚拟dom的最后一个补丁与真实dom进行两次比较。但是，如果组件树太大，diff实际上会有一些开销。在react中，diff算法在内部由纤程优化，在外部，建议开发者使用ShouldComponentUpdate Pure Component来避免问题。
2.2 vue
vue2的响应由Object.defineProperty实现，重写getter``setter等一系列操作实现观察者模式。一旦数据发生变化，整个组件树不会像react那样进行比较，但是数据状态发生变化的组件实例会被更新。
3、生命周期
3.1 react 生命周期
旧的15.x-16
新16
其他：componentDidCatch
React生命周期的命名一直很有语义(小声bb:真的很臭，很长，很难记)
3.2 vue生命周期
4、函数式编程
双方都进行了大规模的变革。虽然源代码不一样，但是设计思路和代码的简洁性确实在进步。
4.1 react hooks
compomentDidUpdate=" Use Effect "原本繁琐的生命周期，虽然不完全一样，但是在大多数场景下，从开发者的角度来看，我们更关心的是道具中的数据或者状态发生变化后会产生什么后果(副作用)，省去了开发者自己对比前后值的过程。(这应该是vue手表上的反应图)
4.2 vue3 组合式api
Vue3组合api借鉴了react hooks中的一些思想。不得不说shine on you是青出于蓝而胜于蓝，框架本身也做了大量的优化工作，所以性能无法和react相比。
函数(){
useEffect(()={
//当演示改变时触发
console.log(演示)
}，[演示])
返回(
divreact/div
)
}
从“vue”导入{reactive，watchEffect}
导出默认值{
setup() {
const state=reactive({ count: 0，name: zs })
watchEffect(()={
console.log(状态.计数)
console.log(state.name)
})
返回{
状态
}
}
}
由于初始化时源代码中的响应机制，新的APIwatchEffect甚至不需要监控谁改了就可以触发副作用，因为整个监控过程都是由vue3源代码中的代理完成的。
不仅如此，vue3还推出了更接近原生js的语法，喜欢！
脚本设置
从“vue”导入{ reactive，ref }；
//渐进式更新：引用api
设val=ref()；
设todos=reactive([
{
id: 0，
标题：“吃”，
done: false，
},
{
id: 1，
标题：“睡觉”，
done: false，
},
]);
函数addTodo() {
todos.push({
id: todos.length，
标题：val.value
done: false，
});
val . value=“”；
}
/脚本
其实到了这里，vue技术栈的同学一定窃喜不已，跳出来一句vue yes！可惜这么好的库也有问题。vue 2 responsive object . define property无法监控数组下标和对象后添加的属性值的变化，这已经是老生常谈了。vue3采用代理Api解决了这些问题，但也带来了新的问题，比如reactive只能传递对象(react useState的简单值和复杂值都可以)。但是，官方推荐的ref需要将值通过。值，真的让社区炸了锅。正因如此，vue团队迫于压力不得不推出toRefs(有兴趣的同学可以了解一下，我之前和易宝线下讨论过)。
5、事件处理(@Click vs onClick)
5.1 vue
在vue中，v-on(缩写为：)指令用于监听DOM事件，并在被触发时运行一些JavaScript代码。通常，v-on用于接收需要调用的方法的名称。
div @click=helloShanghai 欢迎/div
div @ click= hello Shanghai( hello )欢迎/div
通过访问本机DOM事件，可以显式地将$event传递给方法。
div @ click= hello Shanghai( hello ，$event)欢迎/div
元素addEventListener，组件$on
5.2 react
React元素的事件处理类似于DOM元素的事件处理，但语法上有一点不同：
React事件以小驼峰样式命名，而不是完全小写。
当使用JSX语法时，您需要将函数作为事件处理程序而不是字符串来传递。
div onClick={ this.handleClick }单击我/div
div onClick={ this . handle Click . bind(this)}单击我/div
div onClick={()={ this . handle Click()})}单击我/div
div onClick={ this . handle Click()}点击我/div！-写错了
React16在文档上挂载复合事件，在版本17之后，它是根元素。
6、组件化
Vue鼓励编写类似普通HTML的模板。它非常接近标准的HTML元素，只是增加了一些额外的属性。React建议所有的模板都用——JSX编写，这是JavaScript的语法扩展。
7、构建工具
React==创建React应用程序Vue==vue-cli
8、其他
当然还有其他比较，比如vue的slot和react的props.children生命周期：getDerivedStateFormProps，getSnapshotBeforeUpdate
我的看法：
1.react之所以在中后台项目中得到认可，是因为它在处理复杂的业务逻辑或组件重用问题上比vue更优雅，但也需要更好的整体团队技术。龙头大佬的设计和签到能力更好，所以开发成本更高。2.vue以其更加友好和易于使用的书写方式而闻名。更友好的api和更贴心的设计大大提高了开发成本和效率。3.另一方面，vue因为API多，规范了开发者，同时也在一定程度上限制了开发者的发散思维；React因为API少，提高了开发者的创造力，同时因为每个react开发者对react的理解不同，产生了不同的代码风格。4.vue和react在发展的长河中已经越来越成熟。经过慎重考虑，我们认为两者在移动端或者大型中后台都是非常可行的。关于框架的好坏，其实应该更多的考虑公司团队想用什么技术栈，喜欢什么技术栈，擅长什么技术栈等等。
五、全家桶
这篇关于vue和react的详细文章就到这里。关于vue和react的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。