前端神器:一行命令,React 元件轉 Vue 元件!
基於目前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
FrontendMagazine.propTypes = {
name: PropTypes.string
}
FrontendMagazine.defaultProps = {
name: 'FrontendMagazine'
}
// vue
{
name: 'frontend-magazine',
props: {
name: {
type: String,
default: 'FrontendMagazine'
}
}
}
2. 元件自有狀態
3. 生命週期
雖然生命週期名不一樣,但是差不多有對應的
4. 處理事件
// react
class FrontendMagazine {
clickme () {
// xxxx
}
}
// vue
{
name: 'frontend-magazine',
methods: {
clickme () {
// xxx
}
}
}
5. 元件錯誤捕獲
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專案中同時使用。
想要獲取這些資料可以加裙:777641511
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69946034/viewspace-2658109/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 致敬 React: 為 Vue 引入容器元件和展示元件ReactVue元件
- vue和react元件傳值VueReact元件
- vue與react元件的思考VueReact元件
- 前端Vue:函式式元件前端Vue函式元件
- react篇章-React 元件-複合元件React元件
- 玩轉 React 【第03期】:邂逅 React 元件React元件
- react高階元件小demo-受控元件轉換成非受控元件React元件
- React元件React元件
- React篇章-React 元件React元件
- React,用元件化思想寫前端程式碼React元件化前端
- 會vue,學習react元件父子通訊VueReact元件
- 一行命令解決Vue和React打包部署上線VueReact
- react篇章-React 元件-向元件傳遞引數React元件
- Vue元件、元件傳值和元件插槽Vue元件
- React拖拽元件React元件
- React受控元件和非受控元件React元件
- 微前端(qiankun)主應用共享React元件前端React元件
- Vue元件Vue元件
- React 快速上手 - 06 元件設計 容器元件、展示元件、操作元件React元件
- 繼續研究vue元件vue-menu元件Vue元件
- React之受控元件和非受控元件React元件
- React Native元件(二)View元件解析React Native元件View
- React 之受控元件和非受控元件React元件
- React Native元件篇(二) — Image元件React Native元件
- React Native元件篇(三) — TextInput元件React Native元件
- React Native元件篇(一) — Text元件React Native元件
- React.js 小書 Lesson4 – 前端元件化(三):抽象出公共元件類ReactJS前端元件化抽象
- React.js 小書 Lesson4 - 前端元件化(三):抽象出公共元件類ReactJS前端元件化抽象
- React + Storybook + Lerna 構建自己的前端UI元件庫React前端UI元件
- (React啟蒙)理解React 元件React元件
- 深度解析!Vue3 & React Hooks 新UI元件原理VueReactHookUI元件
- 聊聊前端 UI 元件:元件體系前端UI元件
- 聊聊前端 UI 元件:元件設計前端UI元件
- React 基礎_元件React元件
- React的元件模式React元件模式
- React 非同步元件React非同步元件
- react元件的建立React元件
- React專題:元件React元件