京东云开发者｜关于“React 和 Vue 该用哪个”我真的栓Q( 二 ) _生活百科

4.使用层面对比框架引入

- React和Vue都是渐进式框架，支持 script 标签直接使用，也支持在工程中通过模块化方式引入使用。

Jsx VS Template

- 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 ，但只是不是默认的而已。

那么你可能会有疑问，为什么 Template 不去适配所有的 Js 语法？这里举一个例子：Taro 。
Taro1.x 和 Taro2.x 采用了穷举所有 Jsx 语法的方式，去生成不同平台的代码，导致每次 Jsx 或 Js 语法有更新，这两个版本的 Taro 编译器都要同步去做适配，这是一种重编译时的方案，对 Jsx 的支持其实非常痛苦，所以 Taro3 索性采取了重运行时、轻编译时的重构，以获得编译器对 Jsx 更有好的支持。并且还有另一个原因是，我们假如 Template 支持了所有 Js 能力，那么势必又导致了 Template 语法变得复杂，也可能和原本统一的 Ecma 规范割裂（层出不穷的小程序就是一个典型的例子，相当于规范之中又出规范，生态之外再造生态），造成了学习成本增加和沉重的编译器。

- 共性也是有的，都是 DSL，对底层而言，虽然两者采用了不一样的方式实现，但最终都会被编译为渲染函数去执行。
- 下图是 Jsx 语法示例：

文章插图

- 下图是 Template 语法示例：

文章插图
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 更友好，更容易减少构建体积。

组件使用