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

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