React 組件轉 Vue 組件的命令寫法

更新時間：2018年02月28日 08:34:03 作者：王駱菲

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

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

簡介

對于react-to-vue工具，轉化的是基本的react component，而不是全部的react應用。而基本react component的定義更多是基于props和state來渲染的組件，其中也可以包括發(fā)請求。

本文先介紹兩個框架的組件共性和不兼容的地方，再介紹react-to-vue的使用和原理。在實際業(yè)務中，陸金所100多個的react基礎業(yè)務組件，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. 組件自有狀態(tài)

框架	說明
React	在初始化的時候，通過this.state = {xxx}來設置
Vue	通過data 返回函數來設置值，不同于react的state，vue是響應式

3. 生命周期

雖然生命周期名不一樣，但是差不多有對應的

4. 處理事件

框架	說明
React	相應的事件都加到了組件的實例方法上
Vue	設計上比較好，處理事件都加在一個methods對象下面，方便查找,更直觀

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

5. 組件錯誤捕獲

框架	說明
React	componentDidCatch
Vue	errorCaptured

6. jsx語法

react是基于jsx來寫的，對于vue來說，雖然在好多場景下，可以使用template來寫，但是vue也完全支持jsx語法的，對于本工具，也只是把react的jsx語法轉換成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

原理步驟