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天生具備高內聚的特色，也解決了傳統前端開發的弱勢。

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