# 组件划分原则

### 一、单一原则

一个组件只做一件事。
遵循单一原则可以让我们的组件逻辑更简单，职责更明确，复用性更好。
拆分单一原则组件也更方便我们将无状态组件改写成函数组件，来优化react性能。

```
//bad
class Panel extends Component{
    render() {
        return (
            <div className="u-panel">
               <div className="u-panel-header">

               </div>
               <div className="u-panel-body">

               </div>
               <div className="u-panel-footer">

               </div>
            </div>
        )
    }
}

//good
function PanelHeader(props) {
    return (
    <div className="u-panel-header">

    </div>
    )
}

function PanelBody(props) {
    return (
    <div className="u-panel-body">

    </div>
    )
}

function PanelHFooter(props) {
    return (
    <div className="u-panel-footer">

    </div>
    )
}

class Panel extends Component{
    render() {
        return (
            <div className="u-panel">
               <PanelHeader />
               <PanelBody />
               <PanelHFooter />
            </div>
        )
    }
}

```

### 二、通用原则

我们的基础组件，只包含业务中最常用的功能和适用性最广的DOM结构。

### 三、可扩展原则

组件提供最灵活的扩展性。
- 每一个提供样式的DOM结构都允许用户传入class和style来修改样式。
- 每一个UI展示部分都提供接口允许用户替换。组件只封装交互逻辑和提供默认的组件内容。
- 对于封装逻辑的组件可以允许用户传入展示部分组件。
- 逻辑组件允许用户扩展包裹的dom元素，即允许用户传入component（props, react元素或dom元素的字符串）
来替换我们默认包裹的dom元素。


- 样式扩展
```
class Example extends Component{
    render() {
        let {className, style} = this.props;

        return (
            <div className={className} style={style}>

            </div>
        )
    }
}
```

- 组件内容扩展

```
//默认给定一个图标
let defaultProps = {
    closeIcon: <Icon type="close" />
}
class Tile extends Component{

    render() {
    //允许用户传入自定义的图标或按钮
    let { closeIcon } = this.props;
    let
        return (
            <div>
               { React.cloneElement(closeIcon, { className: "close-btn", onClick: this.close }) }
               ...
            </div>
        )
    }
}
Tile.defaultProps = defaultProps;
```