react-components-docs/组件划分原则.md

2.5 KiB
Raw Blame History

组件划分原则

一、单一原则

一个组件只做一件事。 遵循单一原则可以让我们的组件逻辑更简单,职责更明确,复用性更好。 拆分单一原则组件也更方便我们将无状态组件改写成函数组件来优化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元素即允许用户传入componentprops, 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;