4.使用层面对比框架引入
- React和Vue都是渐进式框架,支持 script 标签直接使用,也支持在工程中通过模块化方式引入使用 。
- React:采用的 Jsx 在写法上更为灵活多变,属于在 Js 中增加了 HTML 语法,组件的实现思路是All in Js,开发过程中拥有 Js 完整的生态 。同时开发工具对 JSX 的支持相比于现有可用的其他Vue模板也比较先进 (比如 , linting、类型检查、编辑器的自动完成) 。
- Vue:整体思路是 Template 模板语法,跟 Jsx 相比,它是在 HTML 中增加了对部分 Js 语法的支持 , 在灵活度上不如 Jsx,本质是模板语法无法穷举所有 Js 能力,所以笔者认为Vue内部使用的 slot、directive 等 , 也恰恰是对模板语法不够灵活所做出的一种补充,使模板语法也能完成跟 Jsx 同样的事情 。模板语法也有优点,它更接近原生 HTML , 对于新手上手更友好,并且在Vue3中,它从模版层面进行静态分析,对静态模版做标记,从而提升 diff 的效率 。值得一提的是,与React一样,Vue 在技术上也支持 render 函数和 Jsx , 但只是不是默认的而已 。
Taro1.x 和 Taro2.x 采用了穷举所有 Jsx 语法的方式,去生成不同平台的代码 , 导致每次 Jsx 或 Js 语法有更新,这两个版本的 Taro 编译器都要同步去做适配,这是一种重编译时的方案 , 对 Jsx 的支持其实非常痛苦,所以 Taro3 索性采取了重运行时、轻编译时的重构,以获得编译器对 Jsx 更有好的支持 。并且还有另一个原因是 , 我们假如 Template 支持了所有 Js 能力,那么势必又导致了 Template 语法变得复杂,也可能和原本统一的 Ecma 规范割裂(层出不穷的小程序就是一个典型的例子,相当于规范之中又出规范,生态之外再造生态) , 造成了学习成本增加和沉重的编译器 。
- 共性也是有的,都是 DSL,对底层而言,虽然两者采用了不一样的方式实现 , 但最终都会被编译为渲染函数去执行 。
- 下图是 Jsx 语法示例:
- 共性也是有的,都是 DSL,对底层而言,虽然两者采用了不一样的方式实现 , 但最终都会被编译为渲染函数去执行 。
![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P34513O-0.png)
文章插图
- 下图是 Template 语法示例:
![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P345O22-1.png)
文章插图
SFC
- HTML:React是 Jsx,Vue 是默认的 Template,在这里不在赘述区别,同时需要指出的是 , Vue3 相较Vue2而言,Template 下可以允许存在多个根节点,可以减少一些不必要的 DOM 层级 。
- JS:React 组件本身就是 JS 文件,形式采用函数组件和类组件,编程范式上更贴近面向对象 + 官方推崇的函数式 。Vue2组件是 Options Api,通过一个个配置项去实现生命周期、状态声明和逻辑开发 。Vue3对于部分逻辑处理和Vue2有很大区别 , setup 模式下,已经和React越来越趋同了,编程范式是面向过程 + 函数式,官方命名为 Composition Api,可以使同一个功能逻辑更加集中 。
- CSS:React的 CSS 使用方式是直接通过 Import 导入 , Vue文件中有专门处理样式的 Style 标签 , 值得一提的是,Vue3内置状态驱动的动态 CSS,详细可查看官方文档(https://cn.vuejs.org/api/sfc-css-features.html) 。
- 其他思考:React 的函数式组件和Vue3Composition Api,在 ESM 模块规范下对Tree-shaking 更友好,更容易减少构建体积 。
- React组件仅需引入即可使用 。
- Vue的组件引入后需要全局或局部注册 , 且组件内的 Props 的要显式声明 。
- React的复用主要体现在高阶组件、render props 以及 hooks,但是也有他们对应的不足 。高阶组件层级过深时容易带来 props 的命名冲突、来源不明确的问题,并且额外的组件实例会有更多的内存消耗 。hooks 的引入,使React的逻辑抽离更容易,完全修复了命名冲突 , 来源准确 , 且无额外开销,可以贯彻函数式编程的理念 。但是与此同时,因为 hooks 中可能保留着组件状态,也意味着每次React的更新,如果不进行手动优化 , 不论前后数据是否有变化 , 每个 hook 都会重新执行,这也是底层架构上额外带来的问题 。
- Vue的组件复用主要是是用 Mixin、Extend、插槽和Vue3的 Function API 。Mixin:它和React的高阶组件带来的问题十分类似,响应式数据命名冲突,以及逻辑来源不明确 。插槽:主要功能点是组件复用,它解决了数据命名冲突的问题,同时数据来源准确,但是也存在着额外组件实例带来的内存消耗Function API:目前看来是较为优秀的一种逻辑复用方式,没有以上列出的所有问题,虽然和React的 hooks 十分相像,但是本质不同 , Vue可以追踪到数据变化 , 也仅在组件实例化时执行一次 。
推荐阅读
- 京东云开发者|ElasticSearch降本增效常见的方法
- 云原生之旅 - 6)不能错过的一款 Kubernetes 应用编排管理神器 Kustomize
- Windows下自动云备份思源笔记到Gitee
- 云原生之旅 - 5)Kubernetes时代的包管理工具 Helm
- 云顶之弈碧波法师阵容怎么玩
- 云上当空接龙规则(接龙规则口诀)
- 云上空当接龙怎么玩(空当接龙怎么玩教学说明)
- mqtt_simple例程 nrf9160做主控连接阿里云——
- 云顶之弈S7.5怒玉豹女阵容怎么玩
- 云顶之弈玉龙怎么换形锤阵容