React元件設計之邊界劃分原則

辛成同學發表於2019-04-16
React元件

簡述

結合SOLID中的單一職責原則來進行元件的設計

Do one thing and do it well

javaScript作為一個弱型別並在函式式和麵對物件的領域裡瘋狂試探語言。SOLID原則可能與其他語言例如（java）的表現可能是不同的。不過作為軟體開發領域通用的原則，在javaScript也還是有一席之地，尤其是在React出生之後。因為React元件的對外介面非常規範。

分而治之

任何一個應用，無論多麼複雜，都是由慢慢發展而來的。在初期因為功能較少，可能一個元件就夠。但是隨著時間的推移，功能的迭代，整個元件可能變得越來越臃腫和難於管理。

這個時候就應該對元件進行拆分。用單一職能（feature component）的元件組合起來完成複雜的功能，react也提倡 Composition vs Inheritance – React 使用Composition來完成元件的設計（無論大小）。

缺點

分而治之是一個非常優秀的策略。能把複雜的問題分解成小的問題，解決起來迅速，維護簡單。但是因為元件拆分開了，必定會造成檔案和目錄的增加（FTF && FF檔案組織原則）。這可能會導致維護成本和開發體驗。每個元件都是獨立存在的，但是拆分的時候發現兩個元件邏輯太緊密，無法清晰定義各自的責任，這個時候你就應該考慮一下元件本身是否不應該拆分。

單一原則

其根本思想是弱化元件間的依賴關係，每個元件儘量保證獨立，無論是業務元件還是基礎元件，保證整個系統的的低耦合度。其實這個是非常難的，需要開發者對整個系統有深入的認知。對整個系統的功能點進行模組的劃分，讓不同的業務元件去完成不同的功能模組。這個需要我們開發者自己挖掘，也是最花費心力的！

?： 開發一個購物車模組，如果商品的數量大於0則顯示在購物車裡，而且會出現一個加減商品的操作按鈕和一個顯示商品數量的功能

class ProductionOperation extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			value: 0
		};
	}
  
  increment = () => {
    this.setState({
      value: this.state.value - 1
    });
  }
  
  decrement = () => {
    this.setState({
      value: this.state.value + 1
    });
  }
  
	render() {
		return (
      <div>
        <button onClick={this.increment}> - </button>
        <span>{this.state.value}</span>
        <button onClick={this.decrement}> + </button>
      </div>
    );
	}
}
複製程式碼
const CartHOC = (ProductionOperation)=>{
  return (props)=>{
    if (props.onhand > 0) {
      return <ProductionOption />;
    } else {
      return null;
    }
  }
};
複製程式碼
const ShoppingCart = CartHOC(ProductionOperation);
複製程式碼

這樣就做到了ProductionOperation的複用，和功能單一，通過組合不同的HOC來完成不同的功能。

總結

單一職責原則作為軟體設計的通用原則，在實現元件的高內聚和低耦合上起到了至關重要的作用。但是元件並不是孤島，元件間必須有交流才能完成更大的應用。這需要開發者花費心思進行程式設計

順便提一下

高內聚：react的開發模式將傳統的html,css,js通過JSX整合在一個javaScript檔案中，因為他們是為了實現一個目的（feature）存在的。所以React天生具有高內聚的特點，也解決了傳統前端開發的弱勢。

低耦合：元件關係關係儘量弱化，保持功能獨立，以達到整個系統的低耦合度。

相關文章