前端神器:一行命令,React 元件轉 Vue 元件!

a1322674015發表於2019-09-24
基於目前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 元件轉 Vue 元件!

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


2. 元件自有狀態

前端神器:一行命令,React 元件轉 Vue 元件!

3. 生命週期

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


前端神器:一行命令,React 元件轉 Vue 元件! 前端神器:一行命令,React 元件轉 Vue 元件!


4. 處理事件

前端神器:一行命令,React 元件轉 Vue 元件!


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


5. 元件錯誤捕獲

前端神器:一行命令,React 元件轉 Vue 元件!

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元件,如果轉化有問題,試著改程式碼,儘可能跨框架支援,這樣你寫的元件肯定可以在react和vue專案中同時使用。

前端神器:一行命令,React 元件轉 Vue 元件! 前端神器:一行命令,React 元件轉 Vue 元件! 前端神器:一行命令,React 元件轉 Vue 元件!

想要獲取這些資料可以加裙:777641511

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69946034/viewspace-2658109/,如需轉載,請註明出處,否則將追究法律責任。

相關文章