快捷導(dǎo)航

React 組件轉(zhuǎn) Vue 組件的命令寫(xiě)法

更新時(shí)間：2018年02月28日 08:34:03 作者：王駱?lè)?

本文先介紹兩個(gè)框架的組件共性和不兼容的地方，再介紹react-to-vue的使用和原理,需要的朋友可以參考下

基于目前React和Vue比較火，開(kāi)發(fā)react-to-vue 工具的目的是為了進(jìn)一步提高組件的可復(fù)用用性，讓組件復(fù)用不僅僅局限在一個(gè)框架里面

簡(jiǎn)介

對(duì)于react-to-vue工具，轉(zhuǎn)化的是基本的react component，而不是全部的react應(yīng)用。而基本react component的定義更多是基于props和state來(lái)渲染的組件，其中也可以包括發(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)

框架	說(shuō)明
React	在初始化的時(shí)候，通過(guò)this.state = {xxx}來(lái)設(shè)置
Vue	通過(guò)data 返回函數(shù)來(lái)設(shè)置值，不同于react的state，vue是響應(yīng)式

3. 生命周期

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

4. 處理事件

框架	說(shuō)明
React	相應(yīng)的事件都加到了組件的實(shí)例方法上
Vue	設(shè)計(jì)上比較好，處理事件都加在一個(gè)methods對(duì)象下面，方便查找,更直觀

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

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

框架	說(shuō)明
React	componentDidCatch
Vue	errorCaptured

6. jsx語(yǔ)法

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

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

react在最新版本里面，有flagments的支持，允許根節(jié)點(diǎn)返回多個(gè)節(jié)點(diǎn)，目前沒(méi)有看到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

原理步驟

對(duì)于輸入的文件首先使用babylon來(lái)解析，生成ast
如果文件是typescript，會(huì)去掉相應(yīng)的ts描述
對(duì)ast進(jìn)行遍歷，首先提取propTypes和defaultProps
根據(jù)組件類型，處理函數(shù)組件和類組件
在類組件里面，需要轉(zhuǎn)換生命周期，state等信息
最后根據(jù)提取到的信息拼接成vue組件，通過(guò)prettier-eslint來(lái)美化

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

如何同時(shí)寫(xiě)開(kāi)源的react和vue組件

如果你的組件想要被大家開(kāi)源使用，作者這里有一個(gè)小提議，可以邊寫(xiě)react組件，邊試著轉(zhuǎn)化成vue組件，如果轉(zhuǎn)化有問(wèn)題，試著改代碼，盡可能跨框架支持，這樣你寫(xiě)的組件肯定可以在react和vue項(xiàng)目中同時(shí)使用。

總結(jié)

以上所述是小編給大家介紹的React 組件轉(zhuǎn) Vue 組件的命令寫(xiě)法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: