? ? ? ? react的項(xiàng)目我總共做了兩個(gè)昙楚，并不算多。第一次做react的項(xiàng)目的時(shí)候?qū)eact這是略微有點(diǎn)了解隧膘，但是只限于了解需曾。當(dāng)時(shí)因?yàn)閞eact+redux很火就盲目的在第一次做react項(xiàng)目的時(shí)候就用上redux慧起，結(jié)果慘不忍睹菇晃。本身對(duì)react就不熟悉，redux文檔看了一遍后蚓挤，更是一臉懵逼磺送，完全不知道怎么寫(xiě)，然后在網(wǎng)上找攻略灿意，看了半天似乎看懂了估灿，還是不知道怎么寫(xiě)。后來(lái)時(shí)間實(shí)在來(lái)不及缤剧，就在github上復(fù)制一位大腿的代碼馅袁，把內(nèi)容去掉換成自己的，但還是踩了無(wú)數(shù)個(gè)坑荒辕，加了好多班汗销，終于算是完成了犹褒。

因?yàn)檎麄€(gè)項(xiàng)目組我是第一個(gè)用react做項(xiàng)目的，遇到問(wèn)題只能自己解決弛针，如果不是在github上下載了別人的代碼叠骑，我覺(jué)得自己是不可能按時(shí)完成任務(wù)的，它讓我少走了很多彎路削茁。寫(xiě)一個(gè)已經(jīng)被寫(xiě)爛的todo demo和寫(xiě)一個(gè)完整的項(xiàng)目完全是兩回事宙枷，所以我非常欣賞和感謝那些愿意分享自己代碼的人，也會(huì)將自己的代碼分享出來(lái)茧跋，只要能對(duì)一個(gè)人有幫助慰丛，我就心滿意足了。

? ? ? ?在做第二個(gè)項(xiàng)目的時(shí)候就簡(jiǎn)單很多厌衔，因?yàn)楸旧砭捅鹊谝粋€(gè)項(xiàng)目簡(jiǎn)單璧帝，邏輯不復(fù)雜，所以在做項(xiàng)目的時(shí)候還研究了其他一些有幫助的東西富寿，比如按需加載睬隶。?

? ? ? 總體來(lái)說(shuō)react+redux上手的確不容易，那種隔著state和props去操作DOM的方式讓人覺(jué)得不是很舒服页徐，尤其是redux的dispatch苏潜，action，reducer变勇，store恤左。。搀绣。各種概念讓人眼花繚亂飞袋，無(wú)從下手。

React

? ? ? react是將DOM寫(xiě)進(jìn)js里链患，所謂虛擬dom其實(shí)就是在js中creactElement然后appendChild進(jìn)一個(gè)標(biāo)簽中巧鸭。在append之前對(duì)dom進(jìn)行操作，所以避免了直接操作dom麻捻。而目前其他框架都是將js寫(xiě)進(jìn)html中纲仍，至于那種方式更好，每個(gè)人都有自己的觀點(diǎn)贸毕。其實(shí)各種框架差別并不是很大郑叠，只看自己喜歡或者適合使用哪種。

? ? redux其實(shí)就是在react外層加了一個(gè)數(shù)據(jù)中心明棍，用來(lái)保存react中的數(shù)據(jù)乡革，讓組件之間進(jìn)行更好的互動(dòng)。因?yàn)閞eact是單向數(shù)據(jù)流，只能從上而下進(jìn)行渲染署拟，底層組件如果想要改變上級(jí)或者同級(jí)婉宰，應(yīng)該觸發(fā)redux改變上級(jí)的props，再次進(jìn)行自上而下的渲染推穷。這就是redux倡導(dǎo)的單向數(shù)據(jù)流心包。但是個(gè)人覺(jué)得redux一開(kāi)始的時(shí)候上手比較難，推薦使用另外一個(gè)狀態(tài)管理庫(kù)---mobx馒铃，上手簡(jiǎn)單蟹腾，而且它不自動(dòng)觸發(fā)react更新，省去了優(yōu)化的步驟区宇。但是目前mobx還沒(méi)有很流行娃殖，也只有英文文檔，遇到問(wèn)題也不容易在網(wǎng)上找到解決方法议谷。

react性能優(yōu)化的大頭是shouldComponentUpdate炉爆，利用好這個(gè)鉤子可以極大減少react re render的次數(shù)。想想卧晓，如果一個(gè)父組件有很多子組件芬首，而父組件需要讓某一個(gè)子組件變化而re render的時(shí)候，所有子組件以及孫子組件曾孫子組件都會(huì)一起渲染逼裆，雖然react有很強(qiáng)大的diff算法郁稍，避免了沒(méi)有變化部分的重新渲染，但這依然會(huì)造成很大的資源浪費(fèi)胜宇。一種解決方式是用PureRenderMixin耀怜，但是PureRenderMixin這是進(jìn)行淺比較，只是比較兩個(gè)對(duì)象的引用地址桐愉，如果對(duì)象地址不變而內(nèi)容變化财破，或者地址變化而內(nèi)容不變，這時(shí)候就尷尬了从诲。而immutable.js可以解決這個(gè)問(wèn)題狈究，它定義的對(duì)象不能改變，所有變化都會(huì)產(chǎn)生新的對(duì)象盏求，可以用其提供的API -Immutable.is(a,b)對(duì)兩個(gè)對(duì)象進(jìn)行判斷，只要兩個(gè)對(duì)象的值是相等的亿眠，就返回true碎罚。所以在shouldComponentUpdate只需要利用===和is比較props和state，就可以判斷組件是否需要更新纳像， 而這個(gè)過(guò)程幾乎是0成本荆烈。

? ? ?項(xiàng)目中還使用了react-router按需加載和react-transform模塊熱替換，一個(gè)可以減小初次代碼渲染大小，一個(gè)為開(kāi)發(fā)提供便利憔购，兩個(gè)都很好用宫峦。

? ? ?兩個(gè)項(xiàng)目坐下來(lái)，感覺(jué)自己終于算是入門了玫鸟，react的路還很長(zhǎng)导绷，接下來(lái)我也會(huì)繼續(xù)用react開(kāi)發(fā)項(xiàng)目，并向rn發(fā)展屎飘，在react這條不歸路上妥曲，我是越走越遠(yuǎn)了。钦购。檐盟。

附上代碼地址沥割，希望對(duì)其他人有幫助：https://github.com/bailicangdu