近年來，前端技術不斷火熱，尤其以react和vue技術最為火爆，這兩個前端框架也是目前國內使用得最多的兩個框架。雖然，在使用的廣度上react虐勝一籌，但vue框架的發展趨勢也不容小覷，特別是去年react的mit風波，越來越大的企業開始將目光轉向了vue。那麼有沒有一款軟體或者工具可以實現兩個框架之間元件的可復用呢？答案是有的，react-to-vue就是這麼一款不錯的工具軟體。
對於react-to-vue工具，轉化的是基本的react component，而不是全部的react應用。而基本react component的定義更多是基於props和state來渲染的元件，其中也可以包括發請求。
本文先介紹兩個框架的元件共性和不相容的地方，再介紹react-to-vue的使用和原理。在實際業務中，陸金所100多個的react基礎業務元件，react-to-vue可以轉化90%以上，變成vue元件。
下面通過對比來認識一下react與vue元件的共性。
框架說明
react
通過proptypes來定義屬性名和屬性型別,defaultprops用來設定預設值
vue通過新增props屬性
下面是乙個具體的使用例項：
// react
frontendmagazine.proptypes =
frontendmagazine.defaultprops =
// vue}}
說明react
在初始化的時候，通過this.state = 來設定初始狀態
vue通過data 返回函式來設定值，不同於react的state，vue是響應式
雖然兩個框架的生命週期名不一樣，但是差不多都是有對應關係的。
react生命週期
vue生命週期
框架說明
react
相應的事件都加到了元件的例項方法上
vue設計上比較好，處理事件都加在乙個methods物件下面，方便查詢,更直觀
// react
class
frontendmagazine
}// vue}}
框架說明
react
componentdidcatch
vueerrorcaptured
react是基於jsx來寫的，對於vue來說，雖然在好多場景下，可以使用template來寫，但是vue也完全支援jsx語法的，對於本工具，也只是把react的jsx語法轉換成vue支援的jsx
react在最新版本裡面，有flagments的支援，允許根節點返回多個節點，目前沒有看到vue支援的，還有就是在設計react元件的時候，使用了高階，對於本工具，也是不支援的。
react-to-vue是一款可以把 react 元件轉為 vue 元件的工具，並且支援 typescript 語法解析。使用有以下幾步：
# 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
如果檔案是typescript，會去掉相應的ts描述；
對ast進行遍歷，首先提取proptypes和defaultprops；
根據元件型別，處理函式元件和類元件；
在類元件裡面，需要轉換生命週期，state等資訊；
最後根據提取到的資訊拼接成vue元件，通過prettier-eslint來美化。
前端布局神器display flex
2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目前已得到所有現在瀏覽器的支援。flex 是 flexible box 的縮寫，翻譯成中文就是 彈性盒子 用來為盒裝模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box當然，行內元素 也可...
pandoc 文件轉換神器
pandoc是一款開源轉換工具，可以實現常見的格式轉換。支援全平台操作，以命令列的方式進行轉換。使用 開啟終端視窗，windows下開啟cmd 小試牛刀，將input.txt檔案轉換為output.html檔案。o引數表示輸出檔案 pandoc o output.html input.txt f 指...
前端開發神器之ngrok
ngrok能做什麼，為什麼是前端開發神器？內網穿透，對映本地開發環境到公網，模擬多終端線上環境。結合乙個很簡單的pwa demo，舉個簡單的例子 1.轉殖demo到本地git clone 2.本地8080埠執行demo 複製 3.ngrok內網穿透到公網 複製 4.檢視公網位址 chrome 複製 ...