说说我眼中的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
说说高阶组件
相对高阶函数，传入一个函数作为参数，返回一个函数作为结果。这里是传入的是组件，返回的是组件。函数式的变成思想贯穿其中，不侵入的想法贯穿其中。我想点个赞
说说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时，会触发patch（container，vnode）。其次就是在调用setState时会触发patch（vnode，newVnode）。注意下setState是异步的。每个React组件都有一个renderComponent方法，setState会执行该方法重新渲染render，render函数会返回新的newVnode，然后跟prevVNode比较（Diff）执行对应的patch（prevVNode，newVnode）.
为什么setState是异步的？
无法限制用户执行setState的次数，没必要每次都渲染，只需要对最终的一次更改进行渲染，提高性能
说说Vue和React区别
Vue是一个mvvm的框架，React是前端组件化框架
Vue使用模板，React使用JSX
Vue通过单文件组件，扩展方法的方式实现组件化; React本身就是组件化的。
所以组件化来讲React更彻底
React的入门门槛确实要高一些，Vue相对容易一些。但是React更加发挥js的作用，比如属性（可以是数据，可以是函数），父子组件的交互方式更加单纯。Vue需要采用属性和事件的方式。
我所持的态度
实现项目需求的角度来说，Vue和React都能够实现，没有什么问题。从生态来看，React无疑更加丰富，而且出现一些新的框架常常能够引起我很多的思考，新的一些思想会冲击我，从不能接受到慢慢欣赏。同时学习和使用不同的框架能够相互促进，不建议二者好像只能取其一。就像多学习一门不同的语言，也能够体验更丰富的编程思想，最终能够融会贯通，提高自己。
原文作者：掘金
本文来源：掘金 如需转载请联系原作者