原文首发: qianduan.group, 基于目前 React 和 vue 比较火, 开发 react-to-vue 工具的目的是为了进一步提高组件的可复用用性, 让组件复用不仅仅局限在一个框架里面
简介
对于 react-to-vue 工具, 转化的是基本的 react component, 而不是全部的 react 应用而基本 react component 的定义更多是基于 props 和 state 来渲染的组件, 其中也可以包括发请求
本文先介绍两个框架的组件共性和不兼容的地方, 再介绍 react-to-vue 的使用和原理在实际业务中, 陆金所 100 多个的 react 基础业务组件, react-to-vue 可以转化 90% 以上, 变成 vue 组件
盘点两个框架的组件共性
1. props
框架 | 说明
-----|-----
React | 通过 propTypes 来定义属性名和属性类型, defaultProps 用来设置默认值
Vue | 通过添加 props 属性
- // react
- FrontendMagazine.propTypes = {name: PropTypes.string}
- FrontendMagazine.defaultProps = {
- name: 'FrontendMagazine'
- }
- // vue
- {
- name: 'frontend-magazine',
- props: {
- name: {
- type: String,
- default:
- 'FrontendMagazine'
- }
- }
- }
2. 组件自有状态
框架 | 说明
-----|-----
React | 在初始化的时候, 通过 this.state = {xxx} 来设置
Vue | 通过 data 返回函数来设置值, 不同于 react 的 state,vue 是响应式
3. 生命周期
虽然生命周期名不一样, 但是差不多有对应的
左侧: react, 右侧: vue
4. 处理事件
框架 | 说明
-----|-----
React | 相应的事件都加到了组件的实例方法上
Vue | 设计上比较好, 处理事件都加在一个 methods 对象下面, 方便查找, 更直观
- // react
- class FrontendMagazine {
- clickme () {
- // xxxx
- }
- }
- // vue
- {
- name: 'frontend-magazine',
- methods: {
- clickme () {
- // xxx
- }
- }
- }
5. 组件错误捕获
框架 | 说明
- -----|-----
- React | componentDidCatch
- Vue | errorCaptured
6. jsx 语法
react 是基于 jsx 来写的, 对于 vue 来说, 虽然在好多场景下, 可以使用 template 来写, 但是 vue 也完全支持 jsx 语法的, 对于本工具, 也只是把 react 的 jsx 语法转换成 vue 支持的 jsx
两个框架不兼容的地方
react 在最新版本里面, 有 flagments 的支持, 允许根节点返回多个节点, 目前没有看到 vue 支持的, 还有就是在设计 react 组件的时候, 使用了高阶, 对于本工具, 也是不支持的
react-to-vue 工具
安装及使用
- # install
- npm install -g react-to-vue
- # usage
- Usage: rtv [options] file(react component)
- Options:
- -V, --version output the version number
- -o --output [string] the output file name
- -t --ts it is a typescript component
- -h, --help output usage information
- # demo
- rtv demo.js
原理步骤
对于输入的文件首先使用 babylon 来解析, 生成 ast
如果文件是 typescript, 会去掉相应的 ts 描述
对 ast 进行遍历, 首先提取 propTypes 和 defaultProps
根据组件类型, 处理函数组件和类组件
在类组件里面, 需要转换生命周期, state 等信息
最后根据提取到的信息拼接成 vue 组件, 通过 prettier-eslint 来美化
转化前后对比
如何同时写开源的 react 和 vue 组件
如果你的组件想要被大家开源使用, 作者这里有一个小提议, 可以边写 react 组件, 边试着转化成 vue 组件, 如果转化有问题, 试着改代码, 尽可能跨框架支持, 这样你写的组件肯定可以在 react 和 vue 项目中同时使用
结尾
项目地址: github.com/vicwang163/, 欢迎各位大大来提 bug, 把项目越做越好
来源: https://juejin.im/entry/5a956a025188254e7617d881