思考vue3和react18的区别

·  阅读 6833
思考vue3和react18的区别

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情

前言

个人认为框架的初衷是带给开发者更好的开发体验,更快的性能,更简单的操作。

vue3react18都是最新的框架版本,两者虽然底层原理和思想不同,但是更多的是相同之处,比如都是声明式的,一般多用于spa,都用hooks来逻辑复用等等

用vite初始化vue3和react18项目

pnpm create vite

然后删除无用的代码之后,再改造成同样功能的HelloWorld组件,这个组件做如下事情:

  • 定义数据count,点击按钮可以是count+1,页面也会响应式改变;
  • 还有一个监听数据改变,在控制台打印改变的数据;
  • 有一个数组['apple', 'orange', 'pear'],用于列表渲染到页面。

image-20220727143817399.png

image-20220727144746261.png

接下来开始找不同,找区别,对比出vue和react的差异

不同点1:react使用更加灵活

这里vue3其实也支持JSX,但是用的还是比较少,所以也可以提一下

  • 因为react使用JSX可以当作变量,所以完全可以把模板中的代码的代码抽离出去
  • JSX还可以当作props传递,可以省略比如slot这样的概念
  • JSX是直接支持TS
  • 对于vue2来说,options api需要到固定位置写逻辑,也是没有react灵活

image-20220727143953181.png

不同点2:vue3更智能的依赖收集

  • vue3在模板中的数据可以被模板自动查询,而react需要手动调用useState定义数据和修改数据的方法
  • vue3比如watchEffect/computed是可以自动寻找依赖的,而reac比如useEffect/useMemo/useCallBack的第二个参数数组需要写上依赖的数据

image-20220727144212426.png

不同点3:vue3和react优化手段不同

  • vue是以组件为颗粒度的,可以精准的找到需要更新的地方,组件拆分细一点,就可以达到一定优化效果
  • react是对比差异来更新的,而且父组件更新,子组件默认也会更新,所以react更新手段一个方法就是浅比较,判断父组件更新的时候,子组件是否要更新,从而跳过子组件更新

加上一点自己的理解,可以说vue是自动挡,react是手动挡

分类:
阅读
收藏成功!
已添加到「」, 点击更改