0

函数的形参何其重要! 相当于手机对外提供的入口(每个入口的职责很明确)

函数的抽象层次一定程度体现在形参上，我们应该刻意的将函数赖以运行的数据都通过形参传输，从而提高函数的复用性

先来一道开胃小菜，用IHero 结构如下:

export interface IHero {
  id: string;
  name: string;
  age: number;
}
export enum ESex {
  MAN = 'MAN',
  WOMAN = 'WOMAN',
}

antd的Table组件

  public render() {
    return (
      <Table<IHero>
        columns={[
          {
            title: '姓名',
            key: 'name',
            dataIndex: 'name',
            render: this.renderNameColumn,
          },
          {
            title: '年龄',
            key: 'age',
            dataIndex: 'age',
          },
          {
            title: '性别',
            key: 'sex',
            dataIndex: 'sex',
            render: this.renderSexColumn,
          },
          {
            title: '操作',
            key: '_operate',
            render: this.renderOperateColumn,
          },
        ]}
        dataSource={[
          {
            id: '0',
            name: '路飞',
            age: 22,
            sex: ESex.MAN,
          },
          {
            id: '1',
            name: '女帝',
            age: 28,
            sex: ESex.WOMAN,
          },
        ]}
        rowKey="id"
      ></Table>
    );
  }

界面如下:

重点来了，注意观看三个渲染函数的形参

  private renderNameColumn = (name: string, { sex }: IHero) => {
    let color = sex === ESex.WOMAN ? 'red' : 'blue';
    return <span style={{ color }}>{name}</span>;
  };
  private renderSexColumn = (sex: ESex) => {
    let text = sex === ESex.WOMAN ? '女' : '男';
    return text;
  };
  private renderOperateColumn = ({ id }: IHero) => {
    return (
      <a type="link" onClick={() => this.onDel(id)}>
        删除
      </a>
    );
  };

renderNameColumn 中用到了name外的其他参数，则通过解构赋值去取，要好于

  private renderNameColumn = (name: string, hero: IHero) => {
    let color = hero.sex === ESex.WOMAN ? 'red' : 'blue';
    return <span style={{ color }}>{name}</span>;
  };

renderSexColumn 中只用到了 sex，则无需声明第二个形参

renderOperateColumn中，因为第一个参数要对应列的dataIndex，因为操作没有，即便只用到了一个属性，也通过解构赋值来取

1

通过减少函数对上下文的依赖

看一个查询英雄的功能

        <Row gutter={[24, 24]}>
          <Col>
            <Input
              style={{ width: 249 }}
              value={name}
              onChange={e => this.onNameChange(e.target.value)}
              placeholder={'请输入英雄的名字'}
            />
          </Col>
          <Col>
            <Button type="primary" onClick={this.onSearch}>
              查询
            </Button>
          </Col>
        </Row>

界面如下:

onNameChange :

  private onNameChange = (name: string) => {
    this.setState({
      name,
    });
  };

onSearch:

  private onSearch = () => {
    this.requestList();
  };

requestList:

  private requestList = () => {
    const { name } = this.state;
    // getHeroList(name).then...;
  };

现在的功能来看name从this.state中取是没啥问题，可是name毕竟是requestList运行的关键，要依靠这个查询。

写在里面就意味这个函数在查名字这块只能是从输入框输入，点击查询，这无疑弱化了函数的能力。

这个例子在React中显得更牵强了些，毕竟setState是异步更新的...，

即便是同步更新的Vue中，无关于业务逻辑的变化，name也应该写在形参上，代码如下

  private onSearch = () => {
    const { name } = this.state;
    this.requestList(name);
  };
  private requestList = (name: string) => {
    // getHeroList(name).then...;
  };

形参本身也是文档的一部分，对封装透明性的提示也包括声明类型、命名等。