react 與 vue 使用心得

前言

刷了一波 react 文件,想找個東西練練手，在網上一看，什麼實現一個 網易雲、酷狗音樂、豆瓣 感覺找介面都夠費神了,之前做過 vue 實現餓了麼的一個系統，圖片資源，mock 資料齊全，再加之樣式寫過了，所以直接就拿來用了。本文旨在淺顯的描述一下寫完這個專案的心得體會，歡迎斧正。這裡是專案地址和專案展示地址

1、 起手式

• 在經歷了 1、vue-cli改編；2、generator-react-app（你可以看到整體專案目錄還是有他的影子）；最終回到了 create-react-app，相比 vue-cli 的 webpack 模板，它使用樣式前處理器需要1、npn run eject；2、自己往 loader 裡塞東西,包括 build 的時候用到 extractTextPlugin。不熟悉 webpack 的人可能會有點 egg pain 不舒服。
• 當然你也可以選擇官方推薦的方式和react-app-rewired；官方推薦的方式我覺得很不爽，因為你用 webpack 幹嘛還要自己通過另外的方式去處理，react-app-rewired看上去是一種不錯的解決方案，但是需要去找相應的外掛，再者用慣了 vue-cli 沒有看到相應的配置檔案，很沒有安全感啊。

2、 文件

簡單的概括就是 react不錯,vue 真香（可能是本菜見過最棒的文件吧）。

3、 生命週期

• vue 生命週期（根據生命週期圖以及專案經驗自己假想，保證不正確，但是邏輯好像說的通，不深究瞭解一哈）

  1. 根據傳入的 config,掛上mixin
  2. 通過 proxy 對物件屬性進行的代理
  3. 初始化生命週期：vue 物件上屬性賦值，包括一些$parent、$attrs、$root,然後掛上各種鉤子函式，具體什麼鉤子就不嗶嗶了。
  4. 初始化事件：我理解就是 vue 物件的事件模型的初始化對應的 api 就是 看這裡。
  5. 呼叫 beforeCreated
  6. provide + inject + 響應式初始化（我理解就是初始化依賴收集佇列,掛上definePrototype的set/get）
  7. 呼叫 created 鉤子
  8. 有 el 找 template，沒 el 先掛起等物件呼叫$mount 再找 template
  9. 1、找 render 函式渲染，2、render 木有找 template 擼成 render 函式渲染，3、el 的 html 模板然後渲染，4、都木有？去死，上一步確保有了。
  10. 呼叫 beforeMount 鉤子
  11. 渲染一波，然後把渲染後的元素賦值給 $el 並取代 el。
  12. 調mouted 鉤子
  13. 監聽資料改變然後對檢視進行更新然後更新前後分別呼叫 beforeUpdate update 鉤子；
  14. 當呼叫 distroy 進行銷燬時，先呼叫 beforeDestory 鉤子，然後對子元件、之前的收集的依賴、事件監聽進行解除安裝。然後呼叫 destroy 的。

• react 生命週期(結合嘗試經驗和這篇部落格理解)

  1. 獲取設定元件的 defaultProps 了改一哈；
  2. constructor 裡初始化 state,據說 createReactClass 寫法裡是 getInitialState 鉤子（我沒用過）。

    // getInitinalState 還有一個用法，就是無論啥時候都能用它獲取到初始狀態的，試想你重置表單？
    
    const a = this.getInitialState()

  1. 然後 willMouted + render + didMoutd
  2. 當父元件的props變化時 會呼叫 willRecevieProps(這裡一度讓我以為會存在 didRecevieProps，逼死強迫症啊)
  3. 當監聽到 state 或者 props 發生變化（其實呼叫 setState 就會觸發）的時候會呼叫 shouldComponentUpdate 鉤子，根據返回值來確定是否需要重新呼叫 render；
  4. 當 shouldComponentUpdate 返回值為 true，呼叫 willUpdate 函式
  5. 當 shouldComponentUpdate 返回值為 false 啥也不幹（皮一下真的很開心）
  6. 呼叫 render 函式
  7. didUpdate
  8. WillUnmount 元件被幹掉前呼叫

總結一哈（一家之言）：

• vue 的前戲比較足，準備充分，當資料變化引發的更新開銷小，某條資料改變能夠根據依賴蒐集快速的定位區域性構建 vdom ,進行檢視更新，而且提供了大量的 api 方便 coder；
• react 前戲比較快，直接進入主題，首次渲染比較快，但是資料更新處理就需要重新構建樹然後遍歷，shouldComponentUpdate可以做部分效能優化。

4、 大 API 和小 API

同為漸進式框架，vue提供了大量的 API 對資料、檢視去進行處理。

1. vue檢視提供了一系列的指令控制檢視，v-show、v-for、v-model…,react 的話都要通過自己display、map、onPrototypeChange…去實現
2. 關於資料處理，vue 有 filter,computed 對資料進行監聽過濾，react。。。

就此而言 vue 的 code 開銷可能少一點。。

5、狀態管理

這裡只比較 vuex 和 redux，說實話 redux 用的很不爽啊。

1. 改變資料: redux 是通過 reduder 返回。這特麼就意味修改我每修改一次，哪怕是 a.b.c 這種層級，就要返回整個 state，為了精簡必須得拆，當返回是一個索引型別滴我們就需要 […a] 或者 {…a}要不然根本不會觸發元件內 props 改變。vuex 通過 mutation 直接賦值即可，當有新屬性新增Vue.$set。
2. 注入元件: react-redux 通過全域性 Provider + 元件的 connect,通過 mapStateToProps + mapDispathToProps 將 state 和 dispatch 注入到元件的 props 中。vuex 是將 store 注入根節點，元件通過 $store 或者 mapxxx 進行訪問。
3. 資料篩選 : react 在 mapStateToProps 中處理， vuex 在 getter 上處理。
4. 模組劃分 : react 返回各個 reducer 然後 combine，vuex 是塞到 module 裡。

6、生態

1. web 方面，vue 官推全家桶，到目前為止，vue 的一些開源元件也是很豐富的目前都能滿足我所接觸的業務要求。react 生態…感覺更大，因為可選項太多了，拿動畫來說 motion、animated、groupCssTransition…(ps:groupCssTransition處理路由過渡動畫的時候，有個坑，我比如我想實現 a->b 頁面是從右到左的特效，b->a是從左到右的特效會存在一個老坑，具體大家可以把RouterAnimation的childFactory去掉試試，不詳述。)從這點來說 react 更加 漸進式 一點；
2. native 方面，記得去年看 weex，我連官方 demo 都沒跑起來，不知道現在咋樣；react native 沒跑過，不過很多成功案例，加上最近出的泰羅奧特曼聽上去棒棒噠。
3. 微信小程式：wepy mpvue ??????我選擇用原生主要是因為預覽還要再開一個 ide 很不開心。

結

emmmmmm….感覺有點幫助的點個贊吧。