react 與 vue 使用心得

前言

刷了一波 react 文檔,想找個東西練練手，在網上一看，什麼實現一個 網易雲、酷狗音樂、豆瓣 感受找接口都夠費神了,以前作過 vue 實現餓了麼的一個系統，圖片資源，mock 數據齊全，再加之樣式寫過了，因此直接就拿來用了。本文旨在淺顯的描述一下寫完這個項目的心得體會，歡迎斧正。這裏是 項目地址和 項目展現地址

一、 起手式

• 在經歷了 一、vue-cli改編；二、generator-react-app（你能夠看到總體項目目錄仍是有他的影子）；最終回到了 create-react-app，相比 vue-cli 的 webpack 模板，它使用樣式預處理器須要一、npn run eject；二、本身往 loader 裏塞東西,包括 build 的時候用到 extractTextPlugin。不熟悉 webpack 的人可能會有點 egg pain 不舒服。
• 固然你也能夠選擇官方推薦的方式和react-app-rewired；官方推薦的方式我以爲很不爽，由於你用 webpack 幹嗎還要本身經過另外的方式去處理，react-app-rewired看上去是一種不錯的解決方案，可是須要去找相應的插件，再者用慣了 vue-cli 沒有看到相應的配置文件，很沒有安全感啊。

二、 文檔

簡單的歸納就是 react不錯,vue 真香（多是本菜見過最棒的文檔吧）。

三、 生命週期

• 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. 一、找 render 函數渲染，二、render 木有找 template 擼成 render 函數渲染，三、el 的 html 模板而後渲染，四、都木有？去死，上一步確保有了。
  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能夠作部分性能優化。

四、 大 API 和小 API

同爲漸進式框架，vue提供了大量的 API 對數據、視圖去進行處理。

1. vue視圖提供了一系列的指令控制視圖，v-show、v-for、v-model...,react 的話都要經過本身display、map、onPrototypeChange...去實現
2. 關於數據處理，vue 有 filter,computed 對數據進行監聽過濾，react。。。

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

五、狀態管理

這裏只比較 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 裏。

六、生態

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....感受有點幫助的點個贊吧。