媒介

刷了一波 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….覺得有點協助的點個贊吧。