在使用React元件中轉 Vue 元件的指令寫法有哪些？

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

基於目前React和Vue比較火，開發react-to-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. 元件自有狀態

框架 React#Vue

#說明
在初始化的時候，透過this.state = {xxx}來設定
透過data 回傳函數來設定值，不同於react的state，vue是響應式

3. 生命週期

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

4.處理事件

##框架說明React對應的事件都加到了元件的實例方法上

Vue設計上比較好，處理事件都加在一個methods物件下面，方便找,更直觀

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

5. 元件錯誤捕獲框架說明ReactcomponentDidCatch

VueerrorCaptured

##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
如果檔案是typescript，會去掉對應的ts描述
對ast進行遍歷，首先提取propTypes和defaultProps
根據元件類型，處理函數元件和類別元件
在類別元件裡面，需要轉換生命週期，state等資訊

#最後根據擷取到的資訊拼接成vue元件，透過prettier-eslint來美化

轉換前後對比

# 

如何同時寫入開源的react和vue元件

如果你的元件想要被大家開源使用，作者這裡有一個小提議，可以邊寫react元件，邊試著轉化成vue元件，如果轉換有問題，試著改程式碼，盡可能跨框架支持，這樣你寫的元件肯定可以在react和vue專案中同時使用。 上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

如何解決VUEX相容IE上的報錯問題（詳細教學）

在Node.js中使用readline如何實現逐行讀取、寫入檔案內容############在Vuex中無法觀察到值變化的解決方法是什麼？ ######

以上是在使用React元件中轉 Vue 元件的指令寫法有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！