原文首發： https://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. 生命週期

雖然生命週期名不一樣，但是差不多有對應的

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

原理步驟

1. 對於輸入的文件首先使用babylon來解析，生成ast
2. 如果文件是typescript，會去掉相應的ts描述
3. 對ast進行遍歷，首先提取propTypes和defaultProps
4. 根據組件類型，處理函數組件和類組件
5. 在類組件裡面，需要轉換生命週期，state等訊息
6. 最後根據提取到的訊息拼接成vue組件，通過prettier-eslint來美化

轉化前後對比

如何同時寫開源的react和vue組件

如果你的組件想要被大家開源使用，作者這裡有一個小提議，可以邊寫react組件，邊試著轉化成vue組件，如果轉化有問題，試著改代碼，盡可能跨框架支持，這樣你寫的組件肯定可以在react和vue項目中同時使用。

結尾

項目地址： https:// github.com/vicwang163/r eact-to-vue/ ,歡迎各位大大來提bug，把項目越做越好