2.1 易于維護(hù)組件的設(shè)計(jì)要素

任何一個(gè)復(fù)雜的應(yīng)用，都是由一個(gè)簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的，當(dāng)應(yīng)用還很簡(jiǎn)單的時(shí)候，因?yàn)楣δ芎苌伲赡苤挥幸粋€(gè)組件就足夠了，但是，隨著功能的增加，把越來(lái)越多的功能放在一個(gè)組件中就會(huì)顯得臃腫和難以管理。

就和一個(gè)人最好一次只專注做一件事一樣，也應(yīng)該盡量保持一個(gè)組件只做一件事。當(dāng)開(kāi)發(fā)者發(fā)現(xiàn)一個(gè)組件功能太多代碼量太大的時(shí)候，就要考慮拆分這個(gè)組件，用多個(gè)小的組件來(lái)代替。每個(gè)小的組件只關(guān)注實(shí)現(xiàn)單個(gè)功能，但是這些功能組合起來(lái)，也能滿足復(fù)雜的實(shí)際需求。

這就是“分而治之”的策略，把問(wèn)題分解為多個(gè)小問(wèn)題，這樣既容易解決也方便維護(hù)，雖然“分而治之”是一個(gè)好策略，但是不要濫用，只有必要的時(shí)候才去拆分組件，不然可能得不償失。

拆分組件最關(guān)鍵的就是確定組件的邊界，每個(gè)組件都應(yīng)該是可以獨(dú)立存在的，如果兩個(gè)組件邏輯太緊密，無(wú)法清晰定義各自的責(zé)任，那也許這兩個(gè)組件本身就不該被拆開(kāi)，作為同一個(gè)組件也許更合理。

雖然組件是應(yīng)該獨(dú)立存在的，但是并不是說(shuō)組件就是孤島一樣的存在，不同組件之間總是會(huì)有通信交流，這樣才可能組合起來(lái)完成更大的功能。

作為軟件設(shè)計(jì)的通則，組件的劃分要滿足高內(nèi)聚(High Cohesion)和低耦合(Low Coupling)的原則。

高內(nèi)聚指的是把邏輯緊密相關(guān)的內(nèi)容放在一個(gè)組件中。用戶界面無(wú)外乎內(nèi)容、交互行為和樣式。傳統(tǒng)上，內(nèi)容由HTML表示，交互行放在JavaScript代碼文件中，樣式放在CSS文件中定義。這雖然滿足一個(gè)功能模塊的需要，卻要放在三個(gè)不同的文件中，這其實(shí)不滿足高內(nèi)聚的原則。React卻不是這樣，展示內(nèi)容的JSX、定義行為的JavaScript代碼，甚至定義樣式的CSS，都可以放在一個(gè)JavaScript文件中，因?yàn)樗鼈儽緛?lái)就是為了實(shí)現(xiàn)一個(gè)目的而存在的，所以說(shuō)React天生具有高內(nèi)聚的特點(diǎn)。

低耦合指的是不同組件之間的依賴關(guān)系要盡量弱化，也就是每個(gè)組件要盡量獨(dú)立。保持整個(gè)系統(tǒng)的低耦合度，需要對(duì)系統(tǒng)中的功能有充分的認(rèn)識(shí)，然后根據(jù)功能點(diǎn)劃分模塊，讓不同的組件去實(shí)現(xiàn)不同的功能，這個(gè)功夫還在開(kāi)發(fā)者身上，不過(guò)，React組件的對(duì)外接口非常規(guī)范，方便開(kāi)發(fā)者設(shè)計(jì)低耦合的系統(tǒng)。

上面介紹的只是通用的軟件設(shè)計(jì)原則，對(duì)于React這個(gè)工具，要充分應(yīng)用這些原則，則需要對(duì)React的特性有充分的認(rèn)識(shí)。