React組件怎么轉(zhuǎn)Vue組件-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“React組件怎么轉(zhuǎn)Vue組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React組件怎么轉(zhuǎn)Vue組件”吧!

創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元岳塘做網(wǎng)站,已為上家服務(wù),為岳塘各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

簡介

對(duì)于react-to-vue工具，轉(zhuǎn)化的是基本的react component，而不是全部的react應(yīng)用。而基本react component的定義更多是基于props和state來渲染的組件，其中也可以包括發(fā)請(qǐng)求。
本文先介紹兩個(gè)框架的組件共性和不兼容的地方，再介紹react-to-vue的使用和原理。在實(shí)際業(yè)務(wù)中，陸金所100多個(gè)的react基礎(chǔ)業(yè)務(wù)組件，react-to-vue可以轉(zhuǎn)化90%以上，變成vue組件。

盤點(diǎn)兩個(gè)框架的組件共性

1. props

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

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

3. 生命周期

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

4. 處理事件

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

5. 組件錯(cuò)誤捕獲

6. jsx語法

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

兩個(gè)框架不兼容的地方

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

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. 對(duì)于輸入的文件首先使用babylon來解析，生成ast

2. 如果文件是typescript，會(huì)去掉相應(yīng)的ts描述

3. 對(duì)ast進(jìn)行遍歷，首先提取propTypes和defaultProps

4. 根據(jù)組件類型，處理函數(shù)組件和類組件

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

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

轉(zhuǎn)化前后對(duì)比

到此，相信大家對(duì)“React組件怎么轉(zhuǎn)Vue組件”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享標(biāo)題：React組件怎么轉(zhuǎn)Vue組件-創(chuàng)新互聯(lián)
本文鏈接：http://muchs.cn/article22/cdcjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、微信公眾號(hào)、外貿(mào)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)