資訊專欄INFORMATION COLUMN
摘要：調用鉤子渲染一波，然后把渲染后的元素賦值給并取代。大和小同為漸進式框架，提供了大量的對數據視圖去進行處理。微信小程序我選擇用原生主要是因為預覽還要再開一個很不開心。
前言
刷了一波 react 文檔,想找個東西練練手，在網上一看，什么實現一個 網易云、酷狗音樂、豆瓣 感覺找接口都夠費神了,之前做過 vue 實現餓了么的一個系統(tǒng)，圖片資源，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 生命周期（根據生命周期圖以及項目經驗自己假想，保證不正確，但是邏輯好像說的通，不深究了解一哈）
根據傳入的 config,掛上mixin
通過 proxy 對對象屬性進行的代理
初始化生命周期：vue 對象上屬性賦值，包括一些$parent、$attrs、$root,然后掛上各種鉤子函數，具體什么鉤子就不嗶嗶了。
初始化事件：我理解就是 vue 對象的事件模型的初始化對應的 api 就是 看這里。
調用 beforeCreated
provide + inject + 響應式初始化（我理解就是初始化依賴收集隊列,掛上definePrototype的set/get）
調用 created 鉤子
有 el 找 template，沒 el 先掛起等對象調用$mount 再找 template
1、找 render 函數渲染，2、render 木有找 template 擼成 render 函數渲染，3、el 的 html 模板然后渲染，4、都木有？去死，上一步確保有了。
調用 beforeMount 鉤子
渲染一波，然后把渲染后的元素賦值給 $el 并取代 el。
調mouted 鉤子
監(jiān)聽數據改變然后對視圖進行更新然后更新前后分別調用 beforeUpdate update 鉤子；
當調用 distroy 進行銷毀時，先調用 beforeDestory 鉤子，然后對子組件、之前的收集的依賴、事件監(jiān)聽進行卸載。然后調用 destroy 的。
react 生命周期(結合嘗試經驗和這篇博客理解)
獲取設置組件的 defaultProps 了改一哈；
constructor 里初始化 state,據說 createReactClass 寫法里是 getInitialState 鉤子（我沒用過）。
// getInitinalState 還有一個用法，就是無論啥時候都能用它獲取到初始狀態(tài)的，試想你重置表單？ const a = this.getInitialState()
然后 willMouted + render + didMoutd
當父組件的props變化時 會調用 willRecevieProps(這里一度讓我以為會存在 didRecevieProps，逼死強迫癥啊)
當監(jiān)聽到 state 或者 props 發(fā)生變化（其實調用 setState 就會觸發(fā)）的時候會調用 shouldComponentUpdate 鉤子，根據返回值來確定是否需要重新調用 render；
當 shouldComponentUpdate 返回值為 true，調用 willUpdate 函數
當 shouldComponentUpdate 返回值為 false 啥也不干（皮一下真的很開心）
調用 render 函數
didUpdate
WillUnmount 組件被干掉前調用
總結一哈（一家之言）：
vue 的前戲比較足，準備充分，當數據變化引發(fā)的更新開銷小，某條數據改變能夠根據依賴搜集快速的定位局部構建 vdom ,進行視圖更新，而且提供了大量的 api 方便 coder；
react 前戲比較快，直接進入主題，首次渲染比較快，但是數據更新處理就需要重新構建樹然后遍歷，shouldComponentUpdate可以做部分性能優(yōu)化。
4、 大 API 和小 API同為漸進式框架，vue提供了大量的 API 對數據、視圖去進行處理。
vue視圖提供了一系列的指令控制視圖，v-show、v-for、v-model...,react 的話都要通過自己display、map、onPrototypeChange...去實現
關于數據處理，vue 有 filter,computed 對數據進行監(jiān)聽過濾，react。。。
就此而言 vue 的 code 開銷可能少一點。。
5、狀態(tài)管理這里只比較 vuex 和 redux，說實話 redux 用的很不爽啊。
改變數據: redux 是通過 reduder 返回。這特么就意味修改我每修改一次，哪怕是 a.b.c 這種層級，就要返回整個 state，為了精簡必須得拆，當返回是一個索引類型滴我們就需要 [...a] 或者 {...a}要不然根本不會觸發(fā)組件內 props 改變。vuex 通過 mutation 直接賦值即可，當有新屬性添加Vue.$set。
注入組件: react-redux 通過全局 Provider + 組件的 connect,通過 mapStateToProps + mapDispathToProps 將 state 和 dispatch 注入到組件的 props 中。vuex 是將 store 注入根節(jié)點，組件通過 $store 或者 mapxxx 進行訪問。
數據篩選 : react 在 mapStateToProps 中處理， vuex 在 getter 上處理。
模塊劃分 : react 返回各個 reducer 然后 combine，vuex 是塞到 module 里。
6、生態(tài)web 方面，vue 官推全家桶，到目前為止，vue 的一些開源組件也是很豐富的目前都能滿足我所接觸的業(yè)務要求。react 生態(tài)...感覺更大，因為可選項太多了，拿動畫來說 motion、animated、groupCssTransition...(ps:groupCssTransition處理路由過渡動畫的時候，有個坑，我比如我想實現 a->b 頁面是從右到左的特效，b->a是從左到右的特效會存在一個老坑，具體大家可以把RouterAnimation的childFactory去掉試試，不詳述。)從這點來說 react 更加 漸進式 一點；
native 方面，記得去年看 weex，我連官方 demo 都沒跑起來，不知道現在咋樣；react native 沒跑過，不過很多成功案例，加上最近出的泰羅奧特曼聽上去棒棒噠。
微信小程序：wepy mpvue ??????我選擇用原生主要是因為預覽還要再開一個 ide 很不開心。
結emmmmmm....感覺有點幫助的點個贊吧。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/95613.html
摘要：學習成本很低，另外官方有比較完善的中文文檔。簡單本身是沒有錯誤，一個東西能以簡單的方式解決難道不好嗎關于這個中文文檔居然還有人噴那些喜歡用的是不是英文能力差，我就再報以呵呵一笑。本身擁有中文文檔就是一個優(yōu)勢，結果還成了被噴的地方。 前言 由于這段時間工作上也是挺忙的，就沒有時間去寫這個項目，中間一直都是寫寫停停，進度也是非常慢的。正好前幾天都還比較空，就趕緊抓著空閑時間去寫這個項目，最...
摘要：通過可以讓識別列表長度變化自動更新列表，利用維護項數據可以使每個項保持響應式卻互不影響，對長列表優(yōu)化效果很明顯。最好的方式是將數據統(tǒng)一放在中，子組件通過方式獲取數據。 MobX 是一款十分優(yōu)秀的狀態(tài)管理庫，不但書寫簡潔還非常高效。當然這是我在使用之后才體會到的，當初試水上車的主要原因是響應式，考慮到可能會更符合 Vue 過來的思考方式。然而其實兩者除了響應式以外并沒有什么相似之處。 在...
摘要：在項目開始之前，不能心急立刻去搭建，需要設定幾個步驟來開展，接下來大概的說一下我從技術選型到項目前端搭建好的整個生命周期。開發(fā)該項目的底層的內容遠不止這些，但由于公司制度規(guī)定，只能大概的闡述了在從接手到選型到搭建完畢這到的過程的做法和思考。 前段時間部門要基于一個系統(tǒng)的基礎上開發(fā)一個管理平臺，于是我接手了該平臺的重活，因為上一個平臺我用了vue搭建，所以這次想用react來搭建。在項目...
摘要：市面上竟然擁有多個虛擬庫。虛擬庫，就是出來后的一種新式庫，以虛擬與算法為核心，屏蔽操作，操作數據即操作視圖。及其他虛擬庫已經將虛擬的生成交由與處理了，因此不同點是，虛擬的結構與算法。因此虛擬庫是分為兩大派系算法派與擬態(tài)派。 去哪兒網迷你React是年初立項的新作品，在這前，去哪兒網已經深耕多年，擁有QRN（react-native的公司制定版），HY（基于React的hybird方案）...
閱讀 2787·2021-11-19 11:30
閱讀 3069·2021-11-15 11:39
閱讀 1793·2021-08-03 14:03
閱讀 1999·2019-08-30 14:18
閱讀 2055·2019-08-30 11:16
閱讀 2169·2019-08-29 17:23
閱讀 2611·2019-08-28 18:06
閱讀 2545·2019-08-26 12:22
