如何设计组件

[fengyua5]

组件化开发

随着前端越来越快的发展，一些名词接踵而出，“工程化”、“组件化”、“自动化”等等名词，今天我们就从下面几个维度介绍一下组件式开发。

组件式开发有什么优点？

1、复用
2、封装html、js、css等
3、拆分成小的组件，易测试
4、并行开发，加大工作效率

缺点

组件交互的开销、过度组件化

怎么设计组件？

组件化开发存在下面几种情况
1、为了组件化而组件化
盲目的封装组件，遇到一些不同的地方，就另外写一个组件
例子如下：

<Button
  type="primary"
  fixedWidth={76}
>
  约Ta
</Button>
<ButtonLoading
  type="primary"
  fixedWidth={76}
>
  提交
</ButtonLoading>

2、通过不同的UI部分通过props判断

export default class View extends Component{
  constructor(props){
    super(props)
  }
  
  render(){
    let {
      a,
      b,
      c
    } = this.props;
    
    return (
      <div className="view">
        {
          a && 
          <div>
            显示a
          </div>
        }
        {
          b &&
          <div>
            显示a
          </div>
        }
        {
          c &&
          <div>
            显示a
          </div>
        }
        {/*.....*/}
      </div>
    )
  }
}

当View这个组件又有新的需求的时候，我们又要子在这个组件中加判断d...，有时候会出现几个条件关联判断，这个View会臃肿无比
3、组件耦合性太强、灵活性太低

export default class Input extends Component{
  constructor(props){
    super(props)
  }

  render(){
    return (
      <div className="view">
        <input 
          onChange={() => {
            console.log('........')
          }}
        /> 
      </div>
    )
  }
}

写死点击事件、渲染界面等等
最后：请大家思考是一下什么是组件？组件到底要封装什么？

未完待续