React組件怎么轉Vue組件

本篇內容主要講解“React組件怎么轉Vue組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React組件怎么轉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

原理步驟

1. 對于輸入的文件首先使用babylon來解析，生成ast

2. 如果文件是typescript，會去掉相應的ts描述

3. 對ast進行遍歷，首先提取propTypes和defaultProps

4. 根據組件類型，處理函數組件和類組件

5. 在類組件里面，需要轉換生命周期，state等信息

6. 最后根據提取到的信息拼接成vue組件，通過prettier-eslint來美化

轉化前后對比

到此，相信大家對“React組件怎么轉Vue組件”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！