基于目前React和Vue比較火，開發(fā)react-to-vue 工具的目的是為了進一步提高組件的可復(fù)用用性，讓組件復(fù)用不僅僅局限在一個框架里面

簡介

對于react-to-vue工具，轉(zhuǎn)化的是基本的react component，而不是全部的react應(yīng)用。而基本react component的定義更多是基于props和state來渲染的組件，其中也可以包括發(fā)請求。

本文先介紹兩個框架的組件共性和不兼容的地方，再介紹react-to-vue的使用和原理。在實際業(yè)務(wù)中，陸金所100多個的react基礎(chǔ)業(yè)務(wù)組件，react-to-vue可以轉(zhuǎn)化90%以上，變成vue組件。

盤點兩個框架的組件共性

1. props

// reactFrontendMagazine.propTypes = {  name: PropTypes.string}FrontendMagazine.defaultProps = {  name: 'FrontendMagazine'}// vue{  name: 'frontend-magazine',  props: {    name: {      type: String,      default: 'FrontendMagazine'    }  }}

2. 組件自有狀態(tài)

3. 生命周期

雖然生命周期名不一樣，但是差不多有對應(yīng)的

4. 處理事件

// reactclass FrontendMagazine {  clickme () {    // xxxx  }}// vue{  name: 'frontend-magazine',  methods: {    clickme () {      // xxx    }  }}

5. 組件錯誤捕獲

6. jsx語法

react是基于jsx來寫的，對于vue來說，雖然在好多場景下，可以使用template來寫，但是vue也完全支持jsx語法的，對于本工具，也只是把react的jsx語法轉(zhuǎn)換成vue支持的jsx

兩個框架不兼容的地方

react在最新版本里面，有flagments的支持，允許根節(jié)點返回多個節(jié)點，目前沒有看到vue支持的，還有就是在設(shè)計react組件的時候，使用了高階，對于本工具，也是不支持的

react-to-vue工具

安裝及使用

# installnpm install -g react-to-vue# usageUsage: 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，會去掉相應(yīng)的ts描述
3. 對ast進行遍歷，首先提取propTypes和defaultProps
4. 根據(jù)組件類型，處理函數(shù)組件和類組件
5. 在類組件里面，需要轉(zhuǎn)換生命周期，state等信息
6. 最后根據(jù)提取到的信息拼接成vue組件，通過prettier-eslint來美化

轉(zhuǎn)化前后對比

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

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

總結(jié)

以上所述是小編給大家介紹的React 組件轉(zhuǎn) Vue 組件的命令寫法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！