摘要：調(diào)用鉤子渲染一波，然后把渲染后的元素賦值給并取代。大和小同為漸進(jìn)式框架，提供了大量的對數(shù)據(jù)視圖去進(jìn)行處理。微信小程序我選擇用原生主要是因為預(yù)覽還要再開一個很不開心。

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

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

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

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

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

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

通過 proxy 對對象屬性進(jìn)行的代理

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

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

調(diào)用 beforeCreated

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

調(diào)用 created 鉤子

有 el 找 template，沒 el 先掛起等對象調(diào)用$mount 再找 template

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

調(diào)用 beforeMount 鉤子

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

調(diào)mouted 鉤子

監(jiān)聽數(shù)據(jù)改變?nèi)缓髮σ晥D進(jìn)行更新然后更新前后分別調(diào)用 beforeUpdate update 鉤子；

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

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

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

constructor 里初始化 state,據(jù)說 createReactClass 寫法里是 getInitialState 鉤子（我沒用過）。

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

然后 willMouted + render + didMoutd

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

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

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

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

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

didUpdate

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

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

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

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

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

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

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

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

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

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

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

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

模塊劃分 : react 返回各個 reducer 然后 combine，vuex 是塞到 module 里。

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

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

微信小程序：wepy mpvue ??????我選擇用原生主要是因為預(yù)覽還要再開一個 ide 很不開心。

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