简述
结合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天生具有高内聚的特点，也解决了传统前端开发的弱势。
低耦合：组件关系关系尽量弱化，保持功能独立，以达到整个系统的低耦合度。
