你真的了解组件化设计吗?

本周开始动工新项目 , 相比之前的开发过程 , 这次定制了很多规范 , 比如react写法 (一个文件内部不允许出现两个类) , 可重用组件要封装设计 ,引入ts后 , 变量定义类型不允许出现any , 定期commit , 定期codeReview , and so on .

那么这么做的目的是什么呢? 如果我们不按照种种规范准则 , 不也照样能实现功能需求吗 , 对吧 ? 可是呢 , 长远来看 , 代码的可读性 , 是否冗余, 耦合度高低 ,后期的可维护性 , 产生bug的概率 等, 都和开发时的规范与否密切相关的, 团队协作 , 不仅要对自己负责 , 也要对所有小伙伴负责 , 为用户负责 .
所以 , 这次我就大家耳熟能详的组件化设计来做一个分享,昨天大佬在codeReview时,对我的组件化写法是无比的恐惧与无奈啊 , This is not what I imagined !
因为我的组件化颗粒度不够小 , 而且并没有以封装的思想去设计 , 这只能怪自己平时Bad coding habit
说一下个人对此的理解吧,当我们要设计一个组件时:
first , 要考虑是它需要什么样的入参 , 需要向外暴露哪些接口
second , 还原UI
final , 测试功能

封装一个Button的demo为例:

MyButton.tsx

import React from 'react';

interface PropsTypes {
    size?: string;  // 按钮的大小
    disable?: boolean;  // 是否禁用
    onClick?: () => void;  // 点击事件
}
export default class NyButton extends React.Component<PropsTypes> {
    private sizeObj: {
        [key: string]: {
            smallBtn: string;
            defaultBtn: string;
            largeBtn: string;
        };
    } = {
        smallBtn: className.smallBtn,
        defaultBtn: className.defaultBtn,
        largeBtn: className.largeBtn
    };
    onClickBtn() {
        this.props.onClick();
    }
    render() {
        return (
            <button
                onClick={this.onClickBtn}
                disabled={this.props.disable ? this.props.disable : false}
                className={
                    (this.sizeObj[this.props.size] || className.defaultBtn) +
                    ' ' +
                    (this.props.disable ? className.unable : '')
                }
            >
                {this.props.children ? this.props.children : 'Button'}
            </button>
        );
    }
}

在component 层 , 我们编写了一个button , 而在这之前 , 我们在interface处定义了 它的参数 及类型 , ,我们再来看container层对他的引用是怎么做的

class App extends React.Component<PropsTypes> {
    render() {
        return (
        
            <MyButton
                {...this.props}
                disable={true}
                size="largeBtn"
                onClick={() => {
                    console.log(123);
                }}
            >
                按钮
            </MyButton>
        );
    }
}

在引入时 , 我们可以根据自己的实际需要传入参数 , 去控制组件 , 比如: 传入 disable 表示是否禁用 , small , default , large , 选择用不同大小的样式 , 写入点击事件等
比如: size = 'largeBtn'

2019-04-05_150626.png

size = 'defaultBtn'
disable = {true}

2019-04-05_150844.png

size= ' smallBtn '

2019-04-05_150717.png

只是为了掩饰一下效果 , 忽略样式;
组件化设计 , 是对组件的抽象化,或者说是面向对象的思想 , 关键在于考虑其 接口处的定义 , 需要哪些参数 , 暴露什么接口等 , 这样设计出来的组价 , 才是具备高价值的 , 无论你用vue , react , 都是同样的思想 , react 的世界观里 , 一切组件化 , 连路由都可以组件化 , 而且组件化颗粒度越小 , 性能越好 ( 但也要有控制范围的 ) , 如果不是这样 , 那我们用react vue 等的意义何在 ?