最近使用react做了一個(gè)人事管理平臺(tái)的單頁(yè)面應(yīng)用（SPA），最開(kāi)始的時(shí)候，是使用avalonjs，后臺(tái)因?yàn)槔习逑矚g阿里團(tuán)隊(duì)的ant design組件，所以就推倒重來(lái)，重新用react開(kāi)發(fā)全新的前端。在這之中，也看了Vue的文檔，之前也使用過(guò)Angularjs，幾乎流行的js框架都使用過(guò)，在這里談?wù)勈褂胷eactjs開(kāi)發(fā)的感受。

繁瑣

與avalon和Vue等MVVM框架直接把對(duì)象綁定在vm對(duì)象上相比，react使用了state作為狀態(tài)機(jī)，state上綁定的對(duì)象發(fā)生變化，會(huì)自動(dòng)展現(xiàn)在dom節(jié)點(diǎn)上。然而，綁定歸綁定，如果dom節(jié)點(diǎn)上的value發(fā)生變化，是不會(huì)自動(dòng)表現(xiàn)在state上的，需要手動(dòng)加上onChang、onClick等事件，所以很多的時(shí)間，很多的代碼都消耗在屬性的綁定上，如果時(shí)間有限，真正用于業(yè)務(wù)邏輯編寫(xiě)的時(shí)間并不多。這一點(diǎn)，沒(méi)有MVVM框架方便。

組件間通信不方便

react組件之間的通信，是通過(guò)props屬性來(lái)傳遞的，父組件想要傳遞參數(shù)給子組件，需要通過(guò)props屬性層層傳遞，如果組件嵌套過(guò)深，就需要借助signal包（據(jù)說(shuō)fb官方在使用）來(lái)傳遞信號(hào)，而signal包中主要的方法add和dispatch調(diào)用是散落在不同頁(yè)面的不同地方，單從代碼上看不出邏輯關(guān)系，在沒(méi)有注釋的情況下會(huì)非常令人費(fèi)解。對(duì)于MVVM框架，組件間的調(diào)用直觀(guān)，方便，使用起來(lái)就像這樣：

vmFather = {
   show:function(){
    console.log("I am father component,I have displayed");
  }
}
vmSon = {
  callFatherShow:function(){
    vmFather.show();
  }
}
vmSon.callFatherShow();

代碼不直觀(guān)

雖然形式上看來(lái)還是基本的html網(wǎng)頁(yè)結(jié)構(gòu)，但是當(dāng)中可能摻雜了許多的業(yè)務(wù)邏輯和模板符號(hào)，需要比較大的認(rèn)知成本。

沒(méi)有更快

react以沒(méi)有多余的dom渲染著稱(chēng)，它給我們一個(gè)錯(cuò)覺(jué)，就是react渲染頁(yè)面更快，并且性能優(yōu)良，體驗(yàn)流暢。然而并不是這樣，如果不是極端的情況，非常頻繁的刷新dom，react其實(shí)還比別的框架慢一些。

盡管如此，組件化的思維還是讓人驚嘆這個(gè)框架開(kāi)發(fā)者的想象力，react在我的使用體驗(yàn)中，帶給我的坑遠(yuǎn)比方便要多，但是，它依然是一個(gè)很好的框架，在對(duì)這個(gè)框架有足夠了解的情況下，的確能開(kāi)發(fā)出很好的應(yīng)用。所以，如果一定要使用react開(kāi)發(fā)的話(huà)，需要注意以下幾點(diǎn)：

不要過(guò)度組件化

是的，不要過(guò)度。不要在開(kāi)發(fā)的時(shí)候過(guò)度的想去復(fù)用，事實(shí)上，許多頁(yè)面開(kāi)發(fā)出來(lái)后，原本想要加上通用接口作為一個(gè)新組件的“組件”最后都沒(méi)有再被使用。大多數(shù)的時(shí)候，最后還是像書(shū)寫(xiě)html頁(yè)面那樣書(shū)寫(xiě)react，就是把一個(gè)頁(yè)面的view包含在一個(gè)render里（我知道這看起來(lái)會(huì)很長(zhǎng)很復(fù)雜），這樣會(huì)避免許多不必要的組件間的通信，業(yè)務(wù)邏輯聚合在一起，無(wú)論開(kāi)發(fā)，調(diào)試和重構(gòu)都是有利的。

組件應(yīng)足夠的小

組件像一個(gè)按鈕，一個(gè)tab，一個(gè)radio組，一個(gè)select，這樣粒度的組件就可以了，再大的組件并非不可開(kāi)發(fā)，只是會(huì)失去通用性。所以，要傾向于開(kāi)發(fā)細(xì)粒度的組件，然后把這些組件組合在一起，形成一個(gè)有完整邏輯的頁(yè)面。

幾乎所有的前端團(tuán)隊(duì)如阿里，qunaer，ele.me都在積極為大家提供大而全的組件，然而，在實(shí)際的應(yīng)用中，不會(huì)被重構(gòu)的只有那些功能很簡(jiǎn)單的組件，組件的API再健全，能覆蓋的范圍依然是有限的。所以，無(wú)論是react還是MVVM框架，在使用大公司的開(kāi)源組件時(shí)，當(dāng)然會(huì)節(jié)省一些時(shí)間，但是只要業(yè)務(wù)邏輯稍微復(fù)雜，就發(fā)現(xiàn)很多組件無(wú)法排上用場(chǎng)。
如果還有機(jī)會(huì)開(kāi)發(fā)單頁(yè)面應(yīng)用(SPA)，我會(huì)試試Vue。