前端神器:一行命令,React 組件轉 Vue 組件!

2021-12-24 前端外刊評論

基於目前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通過propTypes來定義屬性名和屬性類型,defaultProps用來設置默認值Vue通過添加props屬性

// react

FrontendMagazine.propTypes = {

   name: PropTypes.string

}

FrontendMagazine.defaultProps = {

   name: 'FrontendMagazine'

}

// vue

{

   name: 'frontend-magazine',

   props: {

       name: {

           type: String,

           default: 'FrontendMagazine'

       }

   }

}

2. 組件自有狀態框架說明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. 組件錯誤捕獲框架說明ReactcomponentDidCatchVueerrorCaptured6. 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

原理步驟

對於輸入的文件首先使用babylon來解析,生成ast

如果文件是typescript,會去掉相應的ts描述

對ast進行遍歷,首先提取propTypes和defaultProps

根據組件類型,處理函數組件和類組件

在類組件裡面,需要轉換生命周期,state等信息

最後根據提取到的信息拼接成vue組件,通過prettier-eslint來美化

轉化前後對比

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

如果你的組件想要被大家開源使用,作者這裡有一個小提議,可以邊寫react組件,邊試著轉化成vue組件,如果轉化有問題,試著改代碼,儘可能跨框架支持,這樣你寫的組件肯定可以在react和vue項目中同時使用。

結尾

項目地址: https://github.com/vicwang163/react-to-vue/, 歡迎各位大大來提bug,把項目越做越好

相關焦點

  • kpc v0.7.8 發布,同時支持 Vue/React/Intact 的前端組件庫
    動機目前市面上已經存在大量組件庫,我們為什麼還要造這個輪子呢?下面我們解釋下這個組件庫開發的動機。
  • 精通react/vue組件設計之實現一個Tag(標籤)和Empty(空狀態)組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言本文是筆者寫組件設計的第五篇文章,之所以會寫組件設計相關的文章,是因為作為一名前端優秀的前端工程師,面對各種繁瑣而重複的工作,我們不應該按部就班的去
  • 《精通react/vue組件設計》之實現一個健壯的警告提示(Alert)組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言本文是筆者寫組件設計的第七篇文章, 今天帶大家實現一個自帶主題且可關閉的Alert組件, 該組件在諸如Antd或者elementUI等第三方組件庫中都會出現,主要用來提供系統的用戶反饋
  • 精通react/vue組件設計之實現一個輕量級可擴展的模態框組件
    之所以會寫組件設計相關的文章,是因為作為一名前端優秀的前端工程師,面對各種繁瑣而重複的工作,我們不應該按部就班的去"辛勤勞動",而是要根據已有前端的開發經驗,總結出一套自己的高效開發的方法.正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先來解構一下Modal組件, 一個Modal分為以下幾個部分:編輯搜圖每一個區塊都可以自定義配置
  • 用 jsx 寫 vue 組件
    下面我們要講的是如何在vue裡面寫jsx,知道react的人應該都知道jsx,jsx的一個特性就是非常靈活,雖然有的人覺得jsx很醜陋,把邏輯都寫到模版的感覺,但蘿蔔青菜各有所愛,適合自己適合團隊的就是最好的。
  • 精通react/vue組件設計教你實現一個極具創意的加載(Loading)組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言本文是筆者寫組件設計的第八篇文章, 今天帶大家用5分鐘實現一個極具創意的加載(loading)組件.涉及的核心知識點主要是css3相關特性, 如果大家非常熟悉,可直接跳過介紹直接看正文.時刻問自己:是否具備創造力?
  • 前端技術:React&Vue對比
    React和vue的業務邏輯是差不多,vue在react上封裝了更簡潔的方法,使用起來更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),還提供了更多的屬性(computed,watch),我還是比較喜歡用react的,更接近js原生,更容易於理解它。
  • 前端諸神大戰,Vue、React 依舊笑傲江湖
    UI 組件;依賴注入保證模塊的獨立性;代碼結構和架構可擴展性強,適合大型項目;「大而全」,Angular 框架包含了前端開發需要的方方面面。(關於這點的好壞判定,見仁見智)Angular 的缺點:眾多不同結構(可注入組件、組件、管道、模塊等)增加了學習難度,而 React 和 Vue 只有「組件」的概念;性能較差。Vue 是最年輕的框架,由前 Google 員工尤雨溪開發。儘管 Vue 是唯一沒有任何大公司支持的框架,但過去幾年內,Vue 的流行度還是大幅增加。目前穩定版本為 2019 年 2 月發布的 2.6 版。
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於vue,react,angular等框架的項目,碧如vue生態的elementUI
  • Vue組件通信的葵花寶典
    vue作為大前端的後起之秀,如今已是前端開發的必備技能,幾乎所有的公司在面試的時候,都默契的增加了一條,有vue開發經驗者優先,可見vue的魅力。vue學習門檻低,易上手,而且生態圈也比較豐富,完全滿足中小企業的需求,作為一名前端開發者,我們必須掌握基本的生存技能,才能在日益變化的前端開發中不被淘汰。
  • 餓了麼公司前端團隊開源前端基於 Vue的桌面端組件庫-Element
    由餓了麼公司前端團隊開源。-- 引入組件庫 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>主題開始前, 你還需要一個主題包, 這裡我們推薦使用element-theme-default.
  • Vue2.0父子組件間通信
    能夠為現代前端開發的工作流程,帶來持久強力的基礎架構。只需幾分鐘,就可以建立並運行一個帶有「熱重載、保存時代碼檢查以及可直接用於生產環境的構建配置」的項目。首先必須先安裝node.js,Node.js 在 0.6.3 版本開始內建npm,所以安裝好node.js後,npm也就裝好。
  • Vue Loader 篇(下):編寫一個單文件 Vue 組件
    引入 Bootstrap 框架開始之前,需要添加 Bootstrap 到 Vue CLI 項目,由於目前所有前端資源都已經通過 NPM 進行管理
  • Vue組件的通信--eventBus
    但是對於具有簡單體系結構的應用程式來說,使用事件在組件之間進行通信就足夠了。為此,我們可以創建一個快速的解決方案並實現EventBus,也稱作vue的中央事件總線,適用於跨級或兄弟組件。EventBus允許我們在一個組件中發出一個事件,而在另一個組件中偵聽該事件。本示例將說明如何在Vue.js應用程式中執行此操作。
  • React組件通信介紹
    (注意:具體如何使用React框架可自行百度,一句命令即可)首先在React框架index的ReactDOM.render中編寫如下代碼:ReactDOM.render(  <React.StrictMode>    <Propstest       name="小明"       age
  • React 函數式組件性能優化指南
    ,提升前端技能)作者: 前端桃園 公號 / 桃翁 (本文來自作者投稿)前言目的本文只介紹函數式組件特有的性能優化方式,類組件和函數式組件都有的不介紹,比如 key 的使用。首先看代碼:父組件 index.js// index.jsimport React, { useState } from "react";import ReactDOM from "react-dom";import Child from ".
  • vue2.0 子組件和父組件之間的傳值
    環境搭建步驟:打開git ,運行 npm install --global vue-cli 這是安裝vue的命令行vue init webpack vue-demo這是vue基於webpack的模板項目cd vue-demo 進入vue-demo文件夾npm install 安裝package.json中依賴的node_modulesnpm run dev 運行該項目
  • 【組件庫從0到1】Vite + Vue3 + TSX開發指南
    不少前端小夥伴問過我,說業務代碼寫了2、3年了,應該如何再進一步?村長的回答中大多數會提到兩個關鍵點:加強工程化實踐能力和底層原理源碼知識。工程化能力對於小夥伴們在工作中解決問題有直接影響,如果你想成為小組內的核心程式設計師,拿更高的職位和薪資,能夠給大家搭架子,解決問題,重難點突破是非常關鍵的幾個考察點。
  • Vue、React、Angular之三國殺,web前端入坑第六篇(上)
    vue、react、angular對比和選擇 這個話題我在vue1.x 時代 2016年 就想寫了,可時光如梭,懶癌侵身,一個擱淺便是這麼多天。vue都2.5了,angular 都變成了另外一種框架了,不敢想,不敢想, JavaScript 開發框架發展的是如此之快。如果有不知道mvvm概念的同學,請先回顧我 入坑第五篇: 秒懂前端框架歷史和MVVM框架原理!
  • 基於jsoneditor二次封裝一個可實時預覽的json編輯器組件react版
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言做為一名前端開發人員,掌握vue/react/angular等框架已經是必不可少的技能了,我們都知道,vue或react等MVVM框架提倡組件化開發