這次花了大半個(gè)月的空閑時(shí)間伤靠，終于完成個(gè)人項(xiàng)目—weinihaigou-react汰现。僅以此文氛谜，來(lái)記錄一下我寫(xiě)這個(gè)項(xiàng)目的感想以及總結(jié)。
1.技術(shù)雜
我用的技術(shù)雜是react^16.0.0 + react-router^ 4.2.0 + redux^ 3.7.2 酝惧。開(kāi)發(fā)腳手架是create-react-app榴鼎。
2.項(xiàng)目介紹
這是一個(gè)SPA的海購(gòu)商城，此項(xiàng)目大大小小共 16 個(gè)主體頁(yè)面晚唇，涉及注冊(cè)巫财、登錄、商品詳情哩陕、購(gòu)物車平项、下單赫舒、訂單、訂單詳情等等闽瓢，是一個(gè)完整的流程接癌。一般公司即便是官網(wǎng)的單頁(yè)面項(xiàng)目都沒(méi)這么復(fù)雜，如果這個(gè)項(xiàng)目能駕馭的了扣讼，相信大部分公司的其他單頁(yè)面應(yīng)用也就不在話下缺猛，即便更復(fù)雜，也不會(huì)比這個(gè)高到哪里去椭符。（做了控制荔燎，不能在該項(xiàng)目付款）
3.資源劃分
因?yàn)橹岸际亲龆囗?yè)面的，所以轉(zhuǎn)做單頁(yè)面销钝，遇到的第一個(gè)問(wèn)題就是如何劃分資源有咨。比如之前我是在一個(gè)項(xiàng)目里面有js文件夾，css文件夾蒸健，html文件夾座享，每個(gè)主文件夾下面還會(huì)有子文件夾。做SPA似忧，我感覺(jué)也是按照頁(yè)面來(lái)分征讲，不過(guò)要細(xì)入拆分成組件，比如首頁(yè)下面有一個(gè)固定的頁(yè)腳橡娄，分類頁(yè)面下面也有一個(gè)相同固定的頁(yè)腳，那么就可以提出來(lái)作為一個(gè)comFooter組件（我寫(xiě)組件的原則就是現(xiàn)在或者將來(lái)有可能用到2次或者以上）癣籽。那么就會(huì)有一個(gè)components文件夾挽唉，用來(lái)專門(mén)放置組件的。其次每個(gè)頁(yè)面還是要放在一個(gè)pages文件夾下面（也是以組件形式的）筷狼。然后做SPA離不開(kāi)的就是路由以及狀態(tài)管理器（這個(gè)簡(jiǎn)單的可以不用的）瓶籽，那么又多出來(lái)了一個(gè)router文件夾以及vuex文件夾。根據(jù)上面的分析埂材，我在src文件夾下面的資源配置如下圖所示：
4.個(gè)人體會(huì)
這一段注定很雜亂但是卻是本次開(kāi)發(fā)的精華所在塑顺。
很多新手和本胖一樣不知道如何做第一步，感覺(jué)有很多東西都要做俏险，那么就慢慢來(lái)严拒。比如本胖這次就是先寫(xiě)好store的骨架以及router的骨架以及main.js和App.vue，這樣你的項(xiàng)目以及可以跑起來(lái)了竖独。然后根據(jù)頁(yè)面一個(gè)一個(gè)來(lái)裤唠，每次寫(xiě)一個(gè)頁(yè)面組件都往router添加一個(gè)路由以及看這個(gè)頁(yè)面組件是否有可以提取的組件，有的話就往components文件夾里面添加一個(gè)對(duì)應(yīng)的組件莹痢，然后在相應(yīng)的頁(yè)面組件引用就可以了种蘸。慢慢地你的router以及store就會(huì)豐滿起來(lái)墓赴。
這次的react項(xiàng)目完全是為了學(xué)習(xí)react而寫(xiě)的。由于之前本寫(xiě)過(guò)一個(gè)vue海淘商城航瞭，所以下面對(duì)react以及vue做一個(gè)項(xiàng)目比較吧诫硕。
路由配置：
react里面要用Router以及Route來(lái)指定相應(yīng)的路由，vu里面只是一個(gè)json格式刊侯。還要注意在vue里面只用resolve=>require(['../pages/goods/goodsResult.vue'], resolve)就能懶加載組件章办，在react-router4以上版本，本胖自己寫(xiě)了一個(gè)懶加載組件asyncComponent滔吠，所有要懶加載的組件都要通過(guò)這個(gè)懶加載組件去調(diào)用纲菌。下面是react以及vue的路由配置圖。
store管理：
2者差不多疮绷，都是有action翰舌，reducer/mutations，store冬骚。不過(guò)椅贱，react你想在組件里面引用store里面的值要每個(gè)組件都手動(dòng)導(dǎo)入store，沒(méi)有想vue那樣全局注冊(cè)機(jī)制（這一點(diǎn)只冻，好的地方在于react的純粹性庇麦，畢竟項(xiàng)目不是你一個(gè)做，vue的話很多東西都可以在全局引入喜德，方便了你自己山橄，但是對(duì)于整個(gè)項(xiàng)目是有污染的)
其他的就是感覺(jué)從vue遷移到react，你需要寫(xiě)很多this.state,this.setState()舍悯，其中this.setState()這個(gè)方法航棱，首先他是異步的，還有一個(gè)回調(diào)函數(shù)，其次，如果你需要改state里面的一個(gè)對(duì)象的屬性或者屬性的屬性岸更，那么需要定義一個(gè)中間對(duì)象，先給這個(gè)中間對(duì)象賦值成你要改成的對(duì)象朴艰，然后去改成這個(gè)中間對(duì)象后再將改變后的中間對(duì)象setState才行。
