前言

刷了一波 react 文檔,想找個(gè)東西練練手，在網(wǎng)上一看，什么實(shí)現(xiàn)一個(gè) 網(wǎng)易云、酷狗音樂(lè)、豆瓣 感覺(jué)找接口都?jí)蛸M(fèi)神了,之前做過(guò) vue 實(shí)現(xiàn)餓了么的一個(gè)系統(tǒng)，圖片資源，mock 數(shù)據(jù)齊全，再加之樣式寫過(guò)了，所以直接就拿來(lái)用了。本文旨在淺顯的描述一下寫完這個(gè)項(xiàng)目的心得體會(huì)，歡迎斧正。這里是項(xiàng)目地址和項(xiàng)目展示地址

1、 起手式

• 在經(jīng)歷了 1、vue-cli改編；2、generator-react-app（你可以看到整體項(xiàng)目目錄還是有他的影子）；最終回到了 create-react-app，相比 vue-cli 的 webpack 模板，它使用樣式預(yù)處理器需要1、npn run eject；2、自己往 loader 里塞東西,包括 build 的時(shí)候用到 extractTextPlugin。不熟悉 webpack 的人可能會(huì)有點(diǎn) egg pain 不舒服。

• 當(dāng)然你也可以選擇官方推薦的方式和react-app-rewired；官方推薦的方式我覺(jué)得很不爽，因?yàn)槟阌?webpack 干嘛還要自己通過(guò)另外的方式去處理，react-app-rewired看上去是一種不錯(cuò)的解決方案，但是需要去找相應(yīng)的插件，再者用慣了 vue-cli 沒(méi)有看到相應(yīng)的配置文件，很沒(méi)有安全感啊。

2、 文檔

簡(jiǎn)單的概括就是 react不錯(cuò),vue 真香（可能是本菜見(jiàn)過(guò)最棒的文檔吧）。

3、 生命周期

• vue 生命周期（根據(jù)生命周期圖以及項(xiàng)目經(jīng)驗(yàn)自己假想，保證不正確，但是邏輯好像說(shuō)的通，不深究了解一哈）

  1. 根據(jù)傳入的 config,掛上mixin

  2. 通過(guò) proxy 對(duì)對(duì)象屬性進(jìn)行的代理

  3. 初始化生命周期：vue 對(duì)象上屬性賦值，包括一些$parent、$attrs、$root,然后掛上各種鉤子函數(shù)，具體什么鉤子就不嗶嗶了。

  4. 初始化事件：我理解就是 vue 對(duì)象的事件模型的初始化對(duì)應(yīng)的 api 就是 看這里。

  5. 調(diào)用 beforeCreated

  6. provide + inject + 響應(yīng)式初始化（我理解就是初始化依賴收集隊(duì)列,掛上definePrototype的set/get）

  7. 調(diào)用 created 鉤子

  8. 有 el 找 template，沒(méi) el 先掛起等對(duì)象調(diào)用$mount 再找 template

  9. 1、找 render 函數(shù)渲染，2、render 木有找 template 擼成 render 函數(shù)渲染，3、el 的 html 模板然后渲染，4、都木有？去死，上一步確保有了。

  10. 調(diào)用 beforeMount 鉤子

  11. 渲染一波，然后把渲染后的元素賦值給 $el 并取代 el。

  12. 調(diào)mouted 鉤子

  13. 監(jiān)聽(tīng)數(shù)據(jù)改變?nèi)缓髮?duì)視圖進(jìn)行更新然后更新前后分別調(diào)用 beforeUpdate update 鉤子；

  14. 當(dāng)調(diào)用 distroy 進(jìn)行銷毀時(shí)，先調(diào)用 beforeDestory 鉤子，然后對(duì)子組件、之前的收集的依賴、事件監(jiān)聽(tīng)進(jìn)行卸載。然后調(diào)用 destroy 的。

• react 生命周期(結(jié)合嘗試經(jīng)驗(yàn)和這篇博客理解)

  1. 獲取設(shè)置組件的 defaultProps 了改一哈；

  2. constructor 里初始化 state,據(jù)說(shuō) createReactClass 寫法里是 getInitialState 鉤子（我沒(méi)用過(guò)）。

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

  1. 然后 willMouted + render + didMoutd

  2. 當(dāng)父組件的props變化時(shí) 會(huì)調(diào)用 willRecevieProps(這里一度讓我以為會(huì)存在 didRecevieProps，逼死強(qiáng)迫癥啊)

  3. 當(dāng)監(jiān)聽(tīng)到 state 或者 props 發(fā)生變化（其實(shí)調(diào)用 setState 就會(huì)觸發(fā)）的時(shí)候會(huì)調(diào)用 shouldComponentUpdate 鉤子，根據(jù)返回值來(lái)確定是否需要重新調(diào)用 render；

  4. 當(dāng) shouldComponentUpdate 返回值為 true，調(diào)用 willUpdate 函數(shù)

  5. 當(dāng) shouldComponentUpdate 返回值為 false 啥也不干（皮一下真的很開(kāi)心）

  6. 調(diào)用 render 函數(shù)

  7. didUpdate

  8. WillUnmount 組件被干掉前調(diào)用

總結(jié)一哈（一家之言）：

• vue 的前戲比較足，準(zhǔn)備充分，當(dāng)數(shù)據(jù)變化引發(fā)的更新開(kāi)銷小，某條數(shù)據(jù)改變能夠根據(jù)依賴搜集快速的進(jìn)行視圖更新，而且提供了大量的 api 方便 coder；

• react 前戲比較快，直接進(jìn)入主題，首次渲染比較快，但是數(shù)據(jù)更新處理就需要重新構(gòu)建樹(shù)然后遍歷，shouldComponentUpdate可以做部分性能優(yōu)化。

4、 大 API 和小 API

同為漸進(jìn)式框架，vue提供了大量的 API 對(duì)數(shù)據(jù)、視圖去進(jìn)行處理。

1. vue視圖提供了一系列的指令控制視圖，v-show、v-for、v-model...,react 的話都要通過(guò)自己display、map、onPrototypeChange...去實(shí)現(xiàn)

2. 關(guān)于數(shù)據(jù)處理，vue 有 filter,computed 對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)過(guò)濾，react。。。

就此而言 vue 的 code 開(kāi)銷可能少一點(diǎn)。。

5、狀態(tài)管理

這里只比較 vuex 和 redux，說(shuō)實(shí)話 redux 用的很不爽啊。

1. 改變數(shù)據(jù): redux 是通過(guò) reduder 返回。這特么就意味修改我每修改一次，哪怕是 a.b.c 這種層級(jí)，就要返回整個(gè) state，為了精簡(jiǎn)必須得拆，當(dāng)返回是一個(gè)索引類型滴我們就需要 [...a] 或者 {...a}要不然根本不會(huì)觸發(fā)組件內(nèi) props 改變。vuex 通過(guò) mutation 直接賦值即可，當(dāng)有新屬性添加Vue.$set。

2. 注入組件: react-redux 通過(guò)全局 Provider + 組件的 connect,通過(guò) mapStateToProps + mapDispathToProps 將 state 和 dispatch 注入到組件的 props 中。vuex 是將 store 注入根節(jié)點(diǎn)，組件通過(guò) $store 或者 mapxxx 進(jìn)行訪問(wèn)。

3. 數(shù)據(jù)篩選 : react 在 mapStateToProps 中處理， vuex 在 getter 上處理。

4. 模塊劃分 : react 返回各個(gè) reducer 然后 combine，vuex 是塞到 module 里。

6、生態(tài)

1. web 方面，vue 官推全家桶，到目前為止，vue 的一些開(kāi)源組件也是很豐富的目前都能滿足我所接觸的業(yè)務(wù)要求。react 生態(tài)...感覺(jué)更大，因?yàn)榭蛇x項(xiàng)太多了，拿動(dòng)畫(huà)來(lái)說(shuō) motion、animated、groupCssTransition...(ps:groupCssTransition處理路由過(guò)渡動(dòng)畫(huà)的時(shí)候，有個(gè)坑，我比如我想實(shí)現(xiàn) a->b 頁(yè)面是從右到左的特效，b->a是從左到右的特效會(huì)存在一個(gè)老坑，具體大家可以把RouterAnimation的childFactory去掉試試，不詳述。)從這點(diǎn)來(lái)說(shuō) react 更加 漸進(jìn)式 一點(diǎn)；

2. native 方面，記得去年看 weex，我連官方 demo 都沒(méi)跑起來(lái)，不知道現(xiàn)在咋樣；react native 沒(méi)跑過(guò)，不過(guò)很多成功案例，加上最近出的泰羅奧特曼聽(tīng)上去棒棒噠。

3. 微信小程序：wepy mpvue ??????我選擇用原生主要是因?yàn)轭A(yù)覽還要再開(kāi)一個(gè) ide 很不開(kāi)心。

結(jié)

emmmmmm....感覺(jué)有點(diǎn)幫助的點(diǎn)個(gè)贊吧。