0

"重复的逻辑" 和 "重复的代码" 是两种相对的状态，可以通过共性来衡量，看到"足够多" 的共性是封装的前提。

共性是指在某一个角度上，不同的事物可以被看成相同的。

人和狗的共性是同为动物，人和沙子的共性是同为地球上的物质，当共性抽象到这种程度，我们应该反思自己的封装是否过渡了。

1

看一个封装重复代码的例子

实现代码

<Pagination
  current={current}
  pageSize={pageSize}
  total={total}
  pageSizeOptions={['20', '50', '100']}
  showQuickJumper={true}
  showSizeChanger={true}
  showTotal={this.showTotal}
  onChange={this.onChange}
  onShowSizeChange={this.onShowSizeChange}
/>
  private showTotal = (total: number) => {
    return `总数：${total}`;
  };

结果下一个页面分页器还是这个鬼样子，我又连续看了几张设计图，都是这样，是时候展现真正的技术了。

PagePagination.tsx

interface PagePaginationProps {
  current: number;
  pageSize: number;
  total: number;
  pageSizeOptions?: string[];
  onChange?: (page: number, pageSize?: number) => void;
  onShowSizeChange?: (current: number, size: number) => void;
}

  public render() {
    const {
      current,
      pageSize,
      total,
      pageSizeOptions,
      onChange,
      onShowSizeChange,
    } = this.props;
    return (
      <Pagination
        current={current}
        pageSize={pageSize}
        total={total}
        pageSizeOptions={pageSizeOptions || ['20', '50', '100']}
        showQuickJumper={true}
        showSizeChanger={true}
        showTotal={this.showTotal}
        onChange={onChange}
        onShowSizeChange={onShowSizeChange}
      />
    );
  }
  private showTotal(total: number) {
    return `总数：${total}`;
  }

使用的时候只需要

  public render() {
    const { current, pageSize, total } = this.state;
    return (
      <PagePagination
        current={current}
        pageSize={pageSize}
        total={total}
        onChange={this.onChange}
        onShowSizeChange={this.onShowSizeChange}
      ></PagePagination>
    );
  }

2

然并卵，上面的封装过于刚性。

这里的共性是什么？无非是给antd 的 Pagination组件一些默认行为。

PagePaginationProps直接继承PaginationProps，没必要自己写一遍

import { PaginationProps } from 'antd/lib/pagination';
interface PagePaginationProps extends PaginationProps {}

通过defaultProps 设置默认值

const defaultPageSize = '20';
...
static defaultProps = {
    pageSize: defaultPageSize,
    pageSizeOptions: [defaultPageSize, '50', '100'],
    showQuickJumper: true,
    showSizeChanger: true,
    showTotal: (total: number) => {
      return `总数：${total}`;
    },
  };
...

  public render() {
    return <Pagination {...this.props} />;
  }

它是灵活的，可以满足一些特殊页面的需求。

试着去寻找重复代码中的共性吧！

诸天气浩荡，我道日兴隆

轻松一刻