【vue其他相关】用了一段时间的vue和react，说说自己的一些理解

本文链接：https://blog.csdn.net/pagnzong/article/details/117746071

文章目录

前言
相通的地方
不同的地方
vue2、vue3、react之间的diff算法有何不同
开发思维的不同
vue的一些我不喜欢的地方
react的一些我不喜欢的地方
结尾

前言

这篇文章可真是一场疯狂的打脸之旅！在从Vue转向React的过程中，我对这两个框架都有了一些独特的感受，导致我对它们之间的喜好一次又一次的发生变化。

我会按照自己的思考记录下来，随着时间的推移，会有更多的感悟。然后我会回来更新文章，将之前的观点搁置一边（横线划掉），写上新的观点。看着这个过程，挺有趣的哈哈。

个人感想纯主观，有错误或补充欢迎和平交流

相通的地方

都使用了vDom的设计
都用组件化的开发思想，都是在构建组件树
一些设计上的趋同：父子组件传值、vue3也加入hooks、react出现vue风格的状态管理库等等
构建工具类似，react是CRA，vue是vue-cli的方式，后面又一起推崇了vite（vite是vue做出的）
都支持TS，且都是以TS构建的框架

不同的地方

HTML的展示，vue使用模板的编写，react使用jsx。要说灵活还是react灵活，但是vue3也支持了jsx的写法。
react修改数据是setState的方式，要考虑传入一个新值，vue是直接修改的方式。
diff算法不同，后面标题详细说明。
css写法不同，react推荐CSS in js或者modules的文件写法，vue可以写在组件的style标签中。
vue相对于react提供了很多便利的指令和功能等，例如v-指令，什么if、show、once等，这些在react上都要自己手写js实现。还包括像路由守卫，keepalive等，react都是要自己实现的。
react的hooks只能使用在函数组件的最高作用域中。而vue的composition api可以。
react目前的UI组件库生态比vue好（功能丰富、bug少，更新频繁）。
react对响应式变量set的时候，会导致整个组件会走render一次，子组件都有可能更新，如果组件复杂了需要手动去优化，react官方也提供了一些控制更新的api。vue的那一套响应式处理能够只更新对应的dom。
开发思维的不同，后面标题细说

vue2、vue3、react之间的diff算法有何不同

前置：diff的存在就是为了能更好的从性能方面去对比两棵新旧虚拟dom树（如果没有优化的三层树复杂度就是On3）。

优化方面：

只对比同一层级
节点不同如果不能移动，那就直接删除重建，不再深入比较
节点通过key这个唯一标识快速区分

优化结果：On

回答的时候，提前和面试官说了解这个不同的时候可能版本有不同，和现在不太一样。

react：关键词，仅右移

例如旧vdom为a b c，新vdom为b c a，从左往右遍历。

第一次移动只需要把旧vdom的a往右移到b后面，就变成了b a c，这样新旧vdom里的b元素位置就都是第一个了。

第二次移动只需要把旧vdom的a往右移到c后面，就变成了b c a，这样新旧vdom的第二个元素就都是c了。

此时的结果已经是和新vdom一样了，不需要移动了。

只移动了2次a，就大功告成。

vue2：关键词双端比较

例如：旧dom为[0,1,2,3]，新dom为[a,b,c,d]，以0为一个指针向右移动，以3为一个指针向左移动，以a为一个指针向右移动，以d为一个指针向左移动。

0与a，d对比，3与a，d对比。对比完后，0、a指针向右移动，3、d指针向左移动，重复双端比较。

这个算法是为了尽量减少移动

可以对比react，如果是一个列表中间插入了2个子项，旧dom[a,b,c,d]，新dom[a,b,x,y,c,d]，react会把cd向右移动再插入xy。而vue2不会移动，直接插入xy。

vue3：vue2的双端比较加上最长子序列

例如[a, b, c, d]插入后变成[a, e, b, c, f, d]，按照vue2的算法，插入应该是e, b, c, f。但我们发现其实b, c不需要跟着e，f重新插入的，b, c是最长子序列，vue3识别出来，就只插入e，f。

这个问题的难点是怎么去描述！还有注意最长子序列和最长子串的区别

开发思维的不同

我是从vue转写react的，一开始还是带着写vue的思想去写react，后面看了一些比较好的课程后发现两个框架的开发思维其实有很大区别的。

我简单的举个例子，例如后台的登录登出方案。

vue2的做法是把用户信息与用户处理的相关方法都维护在vuex中，通过全局的路由守卫做统一的拦截分析，然后做对应的判断。

react的做法是，只将用户信息存放redux，其他的用户处理相关逻辑都分类做成各个hook，有些hook通过监听的方式自驱动执行。

当然，vue2的方式在react中也能够完成功能的实现，只不过说最正统的方案还是react结合hook，这才是react的灵魂之一。

vue的一些我不喜欢的地方

高度自定义一些html的时候，确实模板的写法局限性比较高，不具有jsx的那种灵活性。不过vue3对jsx的支持也很好了现在
vue的易用确实一定程度上会带来一些负面影响，长期使用vue，js基础真有可能会慢慢变得没有react开发者那么好。
vue2的options api写法在大项目中简直太难维护和调试了，有点力不从心的感觉，好在vue3的组合式api很好的处理了这个问题。但大部分企业的版本还停留在vue2中。

暂时没空记录剩下的，以后来填坑

react的一些我不喜欢的地方

类式组件只有路由组件才有history对象
router5与6的过渡没有官方方案，有很多问题（最大的问题是全面倾向hooks难以兼容之前类式组件的写法）
~~函数式组件调用子组件方法很麻烦~~ （后面应该有更新了）
~~redux个人觉得很难用，繁琐~~ （最新的写法很好懂了）
setState修改时要注意不能破坏原数据，当数据很复杂时，set起来特别麻烦，要么深拷贝一遍，要么借助类似immer这样的第三方库来解决。
类式还是函数式组件中，直接修改引用类型的state会改变原值，需要深拷贝才能安全使用。
用一个函数去返回jsx渲染到render上时，函数里面用的state永远是第一次执行时的状态，目前能想到的解决方法是，在render上通过参数传入最新state给函数里。
jsx 嵌套两层循环，如果第二层有输入框，那么两层循环要写在一个地方（例如都在render模板里，或都在函数里），不能函数里一个循环然后render里模板一个循环，要不input无法输入。
无法拿到刚set后的响应式变量，例如我在一个函数fn中set了变量a，之后立马fn2被调用，并且fn2里需要变量a，这个时候去读取到的变量a并不是最新值。fn2的触发又不依赖变量a，所以用useEffect也不适用，目前能想到的是如果这个变量a不用在dom上的话，就直接用普通变量代替就可以了。（是我开发思想没转变过来）
~~css隔离方案都不是很喜欢~~ （后面整理了下技术栈发现有挺不错的，可看【react框架】一些关于样式写法的心得记录，例如怎么去写局部的css）
hooks只能用在函数的第一层作用域，至于为啥可以研究下（要看源码），不过也有解决办法。
旧版时期的React，说实话除了jsx的写法外其实挺难用的，配套的周边库也不好用，我想这也是vue2当时兴起的一个原因一直吧。对比17版后的React，简直一个天一个地哈哈。