新公司的後臺管理用了React技術棧。小程式維護告一段落後，馬上給了我一個後臺任務。之前對React的瞭解基本只有名字，這次帶著需求，看文件，看程式碼，寫程式碼，因為有vue基礎，上手還是蠻快的，兩週內終於按時搞定了，對React也多了一些瞭解，在這裡簡單記錄一下。

因為是先看了Vue再看React，不可避免的會把他們放在一起進行比較。由於現在對於React的瞭解不夠深入，所以比較得出的大多數結論都是Vue更勝一籌，姑且先記下來:

• 相比Vue，React的使用JSX在render函式裡邊寫模板，看慣了Vue程式碼再看JSX真的覺得非常醜陋，html標籤，元件標籤和js，變數混在一起，並且大量的地方使用三元表示式，很亂很不優雅。
• 相比Vue，React的元件的程式碼很不整潔，比如每次都要寫的super(props);，再比如事件處理時類似this.handleClick = this.handleClick.bind(this);這種程式碼，雖然有相應的第三方包autobind-decorator來做簡化，但相比Vue基本隱藏了所有與業務邏輯無關的細節，React在這些地方的處理還是有點莫名其妙，每個元件都要寫重複且對使用者來說無意義的程式碼，很不友好。
• 另外，React官方不推薦使用繼承，而是用組合的方式共用元件。個人一時間覺得不太習慣，但是仔細考慮了兩者之間的區別之後，得出了下邊的結論：
  
  • 混合vs繼承
  • 當你有一個元件a，又要弄一個跟他80%相似的元件b時：
  • 混合：把那80%抽離出來做成通用元件x，剩下不同的20%分別傳入通用元件，生成需要的a,b元件
  • 繼承：b繼承自a,然後把不同的那20%在b裡邊重寫覆蓋掉。或者把那80%抽離出來寫成公共元件x，讓a,b分別繼承x
  • 由此可見，所為混合，我認為只是繼承思路的子集，只是強制要求把公用的部分抽離出來。而繼承則不強制要求，如果只有兩處，a直接繼承b自然最簡單，但如果有3處或更多，寫一個公共的x元件也未嘗不是一個好方式。說到底組合和繼承並無太大區別。

在Vue的基礎上了解React，主要還是框架思想上的比較，比如Vue的computed,filter,directive等功能，都能更方便開發人員，api的使用也更加簡單無門檻。但是主體思路，Vue確實借鑑了很多React的思想，Vuex和Reduce也大同小異。Vue畢竟是站在巨人的肩膀上，自然體驗好很多。但React仍然是熱度最高，社群最活躍的前端框架，認真學習理解還是很有好處的。