vue与react的个人体会

·  阅读 35854
 vue与react的个人体会

自己也在南京三百云待了三年了,从一个懵懂无知的大学生变成一个日益成熟的青年人,这三年也做了不少项目,有react也有vue技术栈,下面我来谈谈自己对于这两个主流框架的看法。 reactvue阵营一直针锋相对,此刻仿佛听到了vue同事1不屑地轻蔑:“嗯?,react?”,react同事2:“嗯?vue?”(想到此刻,我忍俊不禁)

一、全景图

来自大圣老师的开课吧网课中的截图

二、背景

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,fiber正式诞生
  • 2019 年 react 16.8发布 正式支持 hooks语法。
  • 2020 年 10 月 22 日 v17

解决问题

React用来解决什么问题,官方网站上这样说道: We build React to solve one problem:building large applications with data that changes over time.

vue:传奇

发端于2013年的个人项目,但如今已然成为世界三大前端框架之一,在中国大陆更是前端首选。(面试官问:为什么你学习用vue?答:因为爱国!)

  • 2013年,在Google工作的尤雨溪,受到Angular的启发,从中提取自己所喜欢的部分,开发出了一款轻量框架,最初命名为Seed
  • 同年12月,这粒种子发芽了,更名为Vue(因为是个视图层库,而 vue 是 view 的法语),版本号是0.6.0。
  • 2014.01.24Vue正式对外发布,版本号是0.8.0。
  • 发布于2014.02.25的0.9.0,有了自己的代号:Animatrix,这个名字来自动画版的《骇客帝国》,此后,重要的版本都会有自己的代号。
  • 0.12.0发布于2015.06.13,代号Dragon Ball(龙珠),这一年,Vue迎来了大爆发,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 VueVueJS社区也打响了知名度。
  • 1.0.0 Evangelion(新世纪福音战士)是Vue历史上的第一个里程碑。同年,vue-router2015-08-18)、vuex2015-11-28)、vue-cli2015-12-27)相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。很多前端同学也是从这个版本开始成为Vue的用户(vue1纯纯的响应式)。
  • 2016年10月1日 2.0.0 Ghost in the Shell(攻壳机动队)是第二个重要的里程碑,它吸收了ReactVirtual Dom方案,还支持服务端渲染。
  • 2019年2月4日 在2.6发布之前的很长一段时间,Vue核心团队都在忙着vue-cli3.0的开发,积攒了不少需求,发布了vue2倒数第二个的版本(2020年发布)
  • 2020年09月18日 带着成为任何人都可以快速学习、易于接近的框架的使命vue3它来了,同年还推出了新时代打包工具vite(未来可能会取代webpack

vue群众基础图 如下图:

三、技术思想

react整体上是函数式的思想,组件使用jsx语法,all in js,将html与css全都融入javaScript,jsx语法相对来说更加灵活。

vue的整体思想仍然是拥抱经典的html(结构)+css(表现)+js(行为)的形式,vue鼓励开发者使用template模板,并提供指令供开发者使用如v-if、v-show、v-for等指令,因此在开发vue应用的时候会有一种在写经典web应用(结构、表现、行为分离)的感觉。

一些老生常谈的 数据管理(props、data vs state)、组件写法等这里就不比较了。

1、key的异同为例

1、reactvue在列表加key的问题上最终目的是一致的:更准确、更快地拿到oldVnode中对应的vnode节点,提高性能。但是它们实现的算法却有一定的差异。

react

React在渲染数组时如果子组件没有提供key,会默认将循环的index作为key来用作第一次渲染。 源码本质上就是暴力比较法:由于单链表fiber无法使用双指针算法,所以无法对算法使用双指针优化。总体上经历两轮遍历,第一轮遍历:处理更新的节点。第二轮遍历:处理剩下的不属于更新的节点。

为了降低算法复杂度,Reactdiff会预设限制:

  1. 只对同级元素进行Diff。如果一个DOM节点在前后两次更新中跨越了层级,那么React不会尝试复用他。
  2. 两个不同类型的元素会产生出不同的树。如果元素由div变为pReact会销毁div及其子孙节点,并新建p及其子孙节点。
  3. 先判断key再判断type,两者相同则为同一节点。更新>新增/删除
vue

vuediff性能方面要强于react,当我认真阅读了源码与书籍后,佩服至极, 力扣算法题--最长递增子序列 举个例子吧:以数组[2, 11, 6, 8, 1]为例:最终输出的结果为[0, 2, 3],表示最强增长序列的索引分别是0,2,3;对应的值是2,6,8。换句话说,在这个数组中最长连续增长的值就是数组中的2,6,8三个元素。

那么vue3费了这么大的力气,使用这个方法的目的是什么呢? Vue2在DOM-Diff过程中,优先处理特殊场景的情况,即头头比对,头尾比对,尾头比对等。

Vue3DOM-Diff过程中,根据 newIndexToOldIndexMap 新老节点索引列表找到最长稳定序列,通过最长增长子序列的算法比对,找出新旧节点中不需要移动的节点,原地复用,仅对需要移动或已经patch(新增删除节点等操作)节点进行操作,最大限度地提升替换效率,相比于Vue2版本是质的提升!

2、diff的宏观比较

react

react中如果某个组件的状态发生改变,react会把此组件以及此组件的所有后代组件重新渲染,不过重新渲染并不代表会全部丢弃上一次的渲染结果,react还是会通过diff去比较两次的虚拟dom最后patch到真实的dom上。虽然如此,如果组件树过大,diff其实还是会有一部分的开销。react内部通过 fiber优化 diff算法,外部建议开发者使用 shouldComponentUpdate pureComponent 来规避问题。

vue

vue2的响应式是Object.defineProperty实现的,并且重写getter``setter等一系列操作实现观察者模式,一旦数据发生变化,不会像react一样去比较整颗组件树,而是去更新数据状态变化了的组件实例。

3、生命周期

react 生命周期

old 15.x-16

触发阶段react核心生命周期
挂载阶段constructor、componentWillMount、render、componentDidMount、
更新过程componentWillReceiveProps、shouldComponentUpdate、render、componentDidUpdate
卸载阶段componentWillUnMount

new 16+

触发阶段react核心生命周期
挂载阶段constructor、getDerivedStateFormProps、render、componentDidMount
更新过程getDerivedStateFormPropsgetSnapshotBeforeUpdate、shouldComponentUpdate、render、componentDidUpdate
卸载阶段componentWillUnmount

其他:componentDidCatch

React生命周期的命名一直都是非常语义化(小声bb:真是又臭又长又难记)

vue生命周期
选项式 APIHook inside setup
beforeCreate
created
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmount(vue2 beforeDestory)onBeforeUnmount
unmounted(vue2 destoryed)onUnmounted
errorCapturedonErrorCaptured
renderTracked(vue3状态跟踪)onRenderTracked
renderTriggered(vue3状态触发)onRenderTriggered
activatedonActivated
deactivatedonDeactivated

4、函数式编程

双方都做出了大规模的改动,虽然源码不同,但设计思想以及代码简易程度来看,确实都在进步。

react hooks

原先繁琐的 compomentDidUpdate生命周期 =》 useEffect,虽然不完全相同,但在大多数场景中,从开发者层面看待,我们更多是关心props或者state中的数据变化之后,会产生了什么后果(副作用),省去了开发者自己比较前后值的过程。(这应该是react借鉴vue watch)

vue3 组合式api

vue3组合式api借鉴了react hooks中的部分思想,不得不说,青出于蓝而胜于蓝,再加上框架自己也做出了很多优化工作,在性能上是react比不上的。

reactvue
useState、refreactive、ref
useEffectonMounted、watch、watchEffect、onUnmounted
上面整理了比较像的部分,拿useEffect与watchEffect进行对比
function() {
    useEffect(()=>{
        // 当demo发生变化时触发
        console.log(demo)
    },[demo])
    
    return (
        <div>react</div>
    )
}
复制代码
import {reactive, watchEffect} from 'vue'
export default {
    setup() { 
          const state = reactive({ count: 0, name: 'zs' })
          watchEffect(() => {
            console.log(state.count)
            console.log(state.name)
          })
          return {
            state
          }
    }
}
复制代码

由于初始化时源码内部的响应式机制的缘故,新APIwatchEffect甚至都不需要监听是谁发生了变化就可以触发副作用,因为监听的这个过程,全程都是vue3源码中的 Proxy完成的。

不仅如此 vue3更是推出了更贴近原生js的语法,点赞!!!!!!

<script setup>
import { reactive, ref} from "vue";

// 渐进式更新:ref api
let val = ref("");
let todos = reactive([
  {
    id: 0,
    title: "吃饭",
    done: false,
  },
  {
    id: 1,
    title: "睡觉",
    done: false,
  },
]);

function addTodo() {
  todos.push({
    id: todos.length,
    title: val.value,
    done: false,
  });
  val.value = "";
}
</script>
复制代码

其实到这里,vue技术栈的同学一定暗自得意,蹦出一句vue yes! 可惜这么好的库也有存在的问题,vue2响应式Object.defineProperty无法监听数组下标和对象后新增的属性值变化已是老生常谈,vue3采用了 Proxy Api解决这些问题的同时,也带来了新的问题,如reactive只能传对象(react useState简单复杂值都可以),而官方推荐的ref却需要通过 .value才能获取值,这着实让社区炸锅,为此vue团队迫于压力不得不推出 toRefs(感兴趣的同学可以了解一下,之前线下我和艺宝探讨过)。

5、事件处理(@Click vs onClick)

vue

vue中使用 v-on(简写为@) 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常使用v-on接收一个需要调用的方法名称。

<div  @click="helloShanghai">welcome</div>
<div  @click="helloShanghai('hello')">welcome</div>
复制代码

访问原生DOM事件,可以将$event显式传入method中

<div  @click="helloShanghai('hello', $event)">welcome</div>
复制代码

普通元素 addEventListener,组件$on

react

React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:

  • React 事件的命名采用小驼峰式,而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
<div onClick={this.handleClick}>Click me</div>
<div onClick={this.handleClick.bind(this)}>Click me</div>
<div onClick={()=>{this.handleClick()})}>Click me</div>
<div onClick={this.handleClick()}>Click me</div><!-- 错误写法>
复制代码

react16将合成事件挂载到 document上,17版本后为root根元素。

6、组件化

Vue鼓励写近似常规HTML的模板。写起来很接近标准 HTML元素,只是多了一些属性。 React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。

7、构建工具

React ==> Create React APP Vue ==> vue-cli

8、其他

当然还有其他的一些比较,诸如vue的插槽(slot)与reactprops.children等等。

实在累死了。。。

四、我的看法

1、react在中后台项目中由于在处理复杂的业务逻辑或组件的复用问题比vue优雅而被人认可,但这种优雅是要有成本代价的,它更需要团队技术整体比较给力,领头大佬的设计与把关能力要更优秀,因此开发成本更大。 2、vue更友好更易上手的写法著称,渐进式的框架、更友好的api、更亲民的设计让开发成本大大下降而效率大大提升。 3、另一方面,vue因为规定了很多精巧常用api(语法糖),规范了开发者,同时也一定程度上限制了开发者的发散思维;而react因为更少的常用``api提高了开发者的创造力,同时也因为每个react开发者对react有不同的理解而产生不同的代码风格。 4、vuereact在发展长河中越发成熟,深思熟虑后觉得两者不管在移动端或大型中后台都是非常可行的,其实框架本无好坏之分,我们更应该思考的是团队想要用什么技术栈、自己喜欢与擅长什么技术栈。

大家又是如何思考的呢?

回忆起那些年学前端的往事种种,不禁想吟诗一首。

五、吟诗一首

技术变迁,迭起兴衰

我们见证了jquery 的鸟尽弓藏,

我们见证了react 的百炼成刚,

我们见证了vue 的初露锋芒,

我们见证了nodejs 的以柔克刚。

地阔天长,

我们唯有乘风破浪,

纵使技术千变万化,

我们也能驰骋疆场。

致那些为了目标不断学习、奋发图强的人儿,2021年9月7日。

六、全家桶

reactvue
react-router、react-router-domvue-router
reduxvuex
antdelementUI、iview
Create React APPvue-cli、vite
next.jsnuxt
react-native、tarouni-app、weex
antd-mobilemint-ui、vux、Vonic、cube-ui

七、参考文档

React.js 发展史-知乎

React发展历史

为什么 React 现在要推行函数式组件,用 class 不好吗?

Vue简史

vue.js名字的来由是什么,为什么叫vue呢?

React源码揭秘3 Diff算法详解

Vue3的getSequence最长上升子序列

Vue 视图更新patch过程源码解析

vue-github地址

力扣算法题--最长递增子序列

React的生命周期

vue生命周期钩子

【vue3.0】onRenderTracked和onRenderTriggered

VUE3中watch和watchEffect的用法

最简化 VUE的响应式原理

react官方文档

不吹不黑比对下React与Vue的差异与优劣

深入响应式原理

相比 React 全家桶,选择 Vue2 有何优劣?

几款实用的VUE移动端UI框架

react和redux都是从根节点开始对比更新的吗?

关于Vue和React的一些对比及个人思考(上)

关于Vue和React的一些对比及个人思考(中)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改