122 lines
2.5 KiB
Markdown
122 lines
2.5 KiB
Markdown
# 组件划分原则
|
||
|
||
### 一、单一原则
|
||
|
||
一个组件只做一件事。
|
||
遵循单一原则可以让我们的组件逻辑更简单，职责更明确，复用性更好。
|
||
拆分单一原则组件也更方便我们将无状态组件改写成函数组件，来优化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;
|
||
```
|
||
|
||
|