最近使用react做了一個人事管理平臺的單頁面應用（SPA）萎津，最開始的時候精绎，是使用avalonjs挺份，后臺因為老板喜歡阿里團隊的ant design組件哼凯，所以就推倒重來欲间，重新用react開發(fā)全新的前端。在這之中断部，也看了Vue的文檔猎贴，之前也使用過Angularjs，幾乎流行的js框架都使用過家坎，在這里談?wù)勈褂胷eactjs開發(fā)的感受嘱能。
繁瑣
與avalon和Vue等MVVM框架直接把對象綁定在vm對象上相比，react使用了state作為狀態(tài)機虱疏，state上綁定的對象發(fā)生變化惹骂，會自動展現(xiàn)在dom節(jié)點上。然而做瞪，綁定歸綁定对粪，如果dom節(jié)點上的value發(fā)生變化，是不會自動表現(xiàn)在state上的装蓬，需要手動加上onChang著拭、onClick等事件，所以很多的時間牍帚，很多的代碼都消耗在屬性的綁定上儡遮，如果時間有限，真正用于業(yè)務(wù)邏輯編寫的時間并不多暗赶。這一點鄙币，沒有MVVM框架方便。
組件間通信不方便
react組件之間的通信蹂随，是通過props屬性來傳遞的十嘿，父組件想要傳遞參數(shù)給子組件，需要通過props屬性層層傳遞岳锁，如果組件嵌套過深绩衷，就需要借助signal包（據(jù)說fb官方在使用）來傳遞信號，而signal包中主要的方法add和dispatch調(diào)用是散落在不同頁面的不同地方激率，單從代碼上看不出邏輯關(guān)系咳燕，在沒有注釋的情況下會非常令人費解。對于MVVM框架乒躺，組件間的調(diào)用直觀迟郎，方便，使用起來就像這樣：
vmFather = {
show:function(){
console.log("I am father component,I have displayed");
}
}
vmSon = {
callFatherShow:function(){
vmFather.show();
}
}
vmSon.callFatherShow();
代碼不直觀
雖然形式上看來還是基本的html網(wǎng)頁結(jié)構(gòu)聪蘸，但是當中可能摻雜了許多的業(yè)務(wù)邏輯和模板符號宪肖，需要比較大的認知成本表制。
沒有更快
react以沒有多余的dom渲染著稱，它給我們一個錯覺控乾，就是react渲染頁面更快么介，并且性能優(yōu)良，體驗流暢蜕衡。然而并不是這樣壤短，如果不是極端的情況，非常頻繁的刷新dom慨仿，react其實還比別的框架慢一些久脯。
盡管如此，組件化的思維還是讓人驚嘆這個框架開發(fā)者的想象力镰吆，react在我的使用體驗中帘撰，帶給我的坑遠比方便要多，但是万皿，它依然是一個很好的框架摧找，在對這個框架有足夠了解的情況下，的確能開發(fā)出很好的應用牢硅。所以蹬耘，如果一定要使用react開發(fā)的話，需要注意以下幾點：
不要過度組件化
是的减余，不要過度综苔。不要在開發(fā)的時候過度的想去復用，事實上位岔，許多頁面開發(fā)出來后如筛，原本想要加上通用接口作為一個新組件的“組件”最后都沒有再被使用。大多數(shù)的時候赃承，最后還是像書寫html頁面那樣書寫react，就是把一個頁面的view包含在一個render里（我知道這看起來會很長很復雜）悴侵，這樣會避免許多不必要的組件間的通信瞧剖，業(yè)務(wù)邏輯聚合在一起，無論開發(fā)可免，調(diào)試和重構(gòu)都是有利的抓于。
組件應足夠的小
組件像一個按鈕，一個tab浇借，一個radio組捉撮，一個select，這樣粒度的組件就可以了妇垢，再大的組件并非不可開發(fā)巾遭，只是會失去通用性肉康。所以，要傾向于開發(fā)細粒度的組件灼舍，然后把這些組件組合在一起吼和，形成一個有完整邏輯的頁面。
幾乎所有的前端團隊如阿里骑素，qunaer炫乓，ele.me都在積極為大家提供大而全的組件，然而献丑，在實際的應用中末捣，不會被重構(gòu)的只有那些功能很簡單的組件，組件的API再健全创橄，能覆蓋的范圍依然是有限的箩做。所以，無論是react還是MVVM框架筐摘，在使用大公司的開源組件時卒茬，當然會節(jié)省一些時間，但是只要業(yè)務(wù)邏輯稍微復雜咖熟，就發(fā)現(xiàn)很多組件無法排上用場圃酵。
如果還有機會開發(fā)單頁面應用(SPA)，我會試試Vue馍管。
