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天生具有高内聚的特点，也解决了传统前端开发的弱势。

低耦合：组件关系关系尽量弱化，保持功能独立，以达到整个系统的低耦合度。