说说我眼中的Vue和React

前序

我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里面的思想也仅仅停留在字面上。学了一段时间以后就放下了,就这样过了1年的时间。17年的6月,换了一份工作,直接上来就使用vue全家桶开发一个管理系统,时间一个月的时间,当时有人带,结合官方的文档进行开发。但是这个过程仍然觉得有点痛苦,就这样一个月的时间,总算是熬过来了。就这样让我第一次完整的接触了Vue,给我印象最深的是:中文的官网,简单的入门示例。通过这一个月的时间,让我终于对数据驱动视图,对从dom的繁琐操作释放出来是畅快感有了很真实的体验,感谢当初带我入门的磊哥。

对Vue的第一印象胜过了React

从那之后,工作也经过了短暂的动荡,有了新的工作。并且开始了大规模使用Vue或Vue全家桶开发项目,10个月的时间将近,开发了多个spa项目。从我自己独自使用Vue-cli脚手架搭建项目,使用Vue完成各种需求和动效。收货真的非常大,心里面对Vue更是喜欢的很,比起之前学习React的时候,简直觉得Vue就是最好用的。心里也有了一点偏执的认为React比不上Vue,在公司推崇Vue胜过React。

最近使用React+React-Router开发了一个项目

为什么会这样做呢?能够使用React开发的SPA项目,肯定能够使用Vue开发啊,况且我心里一直推崇Vue的嘛。其实,我只是抱着试试的心态,做技术的不能对某种技术抱有偏见,应该敞开心胸,敢于尝试和接纳新的东西,固步自封不可取,不可取,不可取(重要的事情往往说3遍)。妨碍你自己进步的往往不是技术的门槛高低,而是你那狭窄的眼光和见识。在接到公司的一个新的需求以后,我给自己定了一个小目标:那就是使用React来尝试开发一把。话虽如此,毕竟是公司项目,而且是涉及重要的业务(购买相关),不能搞砸,遇到任何坑必须自己全力以赴的填平。我也提前进入了技术的预研,脚手架工具,React的用法,React-Router的用法等等,尽量提前去搞清楚我说完全不知道的,做一个全面的学习(快速学习)。基于create-react-app搭建demo,因为有了Vue的开发经验,所以使用React开发需要准备和了解的东西基本心里有数了。开发环境的配置,跨域的联调,在不运行npm run eject的情况下添加一些配置,打包时的路径(context如何设置),项目里面涉及的动画效果等等都提前进行实践,争取在正式开发之前心里有数。

使用React以后的体验

虽然使用React才开发了一个项目,但是却有很多的感受是在Vue里面没有的,甚至我不得不重新审视两个组件,先说说哪些东西是React里面让我耳目一新的:函数式编程,纯函数组件,jsx,css-in-js,高阶组件,redux等。这里列举到现在还停留在我脑海的东西,不一定对,但却是我没有从Vue里面发现的。

说说JSX

我跟很多人一样,一开始觉得JSX完全打乱了我之前固有的观念(HTML,CSS,JS分离),心里各种抵触:这是啥啊,把js和html混合到一起。尽管这样,我也开始去思考这个背后的项目,充分发挥javascript的力量,让HTML更富有展现力,可以说是HTML in JS吧。这种做法是好是坏,其实我没有任何的答案,我只是觉得这是一种新的思路和想法,到后来的使用styled-components,这里仍然在背后贯穿了一种思想:css in js。把css也写入了js对象里面,甚至变成了一个样式组件了。(简直太糟糕了——最开始的抱怨),同样的我开始接受这种想法,觉得这样做也有其合理性的一面。而且也找了一些相关的会议视频来看,心里面开始慢慢的接受了这种想法。这是在Vue里面未曾给到我的。

说说纯函数组件

在React中,一个普通的函数就可以作为组件使用,返回JSX。只是没有生命周期函数,做一个展示组件使用,从外界接收属性数据,没有任何问题。React就是这样不断的向外界传递发挥javascript的最大能效——All in js

说说高阶组件

相对高阶函数,传入一个函数作为参数,返回一个函数作为结果。这里是传入的是组件,返回的是组件。函数式的变成思想贯穿其中,不侵入的想法贯穿其中。我想点个赞,但是这样也带来了一定程度的wrapper hell。幸好hooks出现了。

说说redux thunk saga

我就不说redux是干什么的,只是有一点,redux里面提到了thunk时(异步的action),说这个是例外,因为action是个普通Object,thunk里面变成了函数。为什么说saga好了呢,他更好的贯穿了action是个纯对象的思想。既然说好的,咱们就不要随便例外。

说说Vue和React相通的地方

虚拟DOM

使用js来实现一个DOM结构,DOM变化通过使用Diff算法比较js对象(内存中),找出不一样的地方,然后更新,只更新发生变化的,提高了重绘性能。

为什么呢?因为DOM的操作时耗性能的,而JS运行效率更好,所以两者都选择了使用vdom。Vue借鉴了一个虚拟dom的库snabbdom,h函数就是来创建虚拟dom的。

var vnode= h('div#div1',{},[h('span',{},'Hello'),h('span',{},'world')]) // h函数接收三个参数:标签,属性,标签包含的children

Diff实现过程

patch(container,vnode)和patch(vnode,newVnode)

首次渲染的时候使用前一个path进行render(createElement),data属性发生变化时使用后一个path进行rerender(updateChildren)

Vue数据响应式

Vue里面初始化时定义在data里面的属性会被重新定义(代理)到vm对象上,使用Object.defineProperty,所以我们才可以使用this(指向vm)访问定义在data里面的属性。首次渲染以后显示页面,并且这里会绑定依赖,为啥是这里才绑定呢?因为只针对在页面上显示的属性(get时)进行set监听,如果没有使用过,那么也就没必要监听set了,数据发生变化时,set里面会调用updateComponent方法,里面调用vm._update方法,重新执行vm._render方法,里面执行patch(prevVnode,newVnode)提高性能。

React数据响应式

首次渲染ReactDOM.render和setState会触发渲染,源码了解:https://zhangxuefei.site/p/2118

为什么setState是异步的?

无法限制用户执行setState的次数,没必要每次都渲染,只需要对最终的一次更改进行渲染,提高性能

说说Vue和React区别

Vue是一个mvvm的框架,React是前端组件化框架

Vue使用模板,React使用JSX

Vue通过单文件组件,扩展方法的方式实现组件化; React本身就是组件化的。

所以组件化来讲React更彻底

React的入门门槛确实要高一些,Vue相对容易一些。但是React更加发挥js的作用,比如属性(可以是数据,可以是函数),父子组件的交互方式更加单纯。Vue需要采用属性和事件的方式。

从未来发展来看

React仍然会引领潮流,特别是最近要推出的hooks功能,赋予了function组件更强大的功能。可以说,React的team不断在革新,hoc虽然能够灵活的扩展组件,但是带来了wrapper hell问题。hooks的诞生让function组件以后不能再称为无状态组件了,而是就叫function组件。很好的解决了(wrapper hell, huge class等痛点)

我所持的态度

实现项目需求的角度来说,Vue和React都能够实现,没有什么问题。从生态来看,React无疑更加丰富,而且出现一些新的框架常常能够引起我很多的思考,新的一些思想会冲击我,从不能接受到慢慢欣赏。同时学习和使用不同的框架能够相互促进,不建议二者好像只能取其一。就像多学习一门不同的语言,也能够体验更丰富的编程思想,最终能够融会贯通,提高自己。

作者:张雪飞
出处:https://zhangxuefei.site/p/2068
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注