阅读 272

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

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

关注下面的标签,发现更多相似文章
评论