建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“React組件怎么轉(zhuǎn)Vue組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React組件怎么轉(zhuǎn)Vue組件”吧!
創(chuàng)新互聯(lián)專注于中大型企業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設和網(wǎng)站改版、網(wǎng)站營銷服務，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶千余家，服務滿意度達97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運用，我們將一直專注高端網(wǎng)站設計和互聯(lián)網(wǎng)程序開發(fā)，在前進的路上，與客戶一起成長！
簡介
對于react-to-vue工具，轉(zhuǎn)化的是基本的react component，而不是全部的react應用。而基本react component的定義更多是基于props和state來渲染的組件，其中也可以包括發(fā)請求。
本文先介紹兩個框架的組件共性和不兼容的地方，再介紹react-to-vue的使用和原理。在實際業(yè)務中，陸金所100多個的react基礎業(yè)務組件，react-to-vue可以轉(zhuǎn)化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. 組件自有狀態(tài)
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語法轉(zhuǎn)換成vue支持的jsx
兩個框架不兼容的地方
react在最新版本里面，有flagments的支持，允許根節(jié)點返回多個節(jié)點，目前沒有看到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
根據(jù)組件類型，處理函數(shù)組件和類組件
在類組件里面，需要轉(zhuǎn)換生命周期，state等信息
最后根據(jù)提取到的信息拼接成vue組件，通過prettier-eslint來美化
轉(zhuǎn)化前后對比
到此，相信大家對“React組件怎么轉(zhuǎn)Vue組件”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！
分享標題：React組件怎么轉(zhuǎn)Vue組件
文章鏈接：http://www.ef60e0e.cn/article/gspjcd.html
