代码优化 (一）：状态提取和代码复用

状态的提取和封装

编写代码声明变量的过程当中常常会存在各类状态或者类型的初始化。最开始参与项目的

过程当中会直接使用未通过处理封装的数据,若后期更改时将难以查找和修改。

解决方法：

• 提取出全局的状态或变量
• 给其添加说明和其余属性(封装到enum(状态,变量值公共文件)),
• 导出,须要时按需导入

优势：

易于快速查找和修改，逻辑清晰。

修改一处便可,减小增删改查工程量。

example:选择做业类型分布进行处理

selectHomeworkType = (value) => {
      console.log('you select',value);
      switch (value) {
        case 52690:
        case 52691:
          fn1...;
          break;
        case 52692:
        case 52693:
          fn2....
          break;
        case 52694:
          fn3... 
          break;
      }
  };

上述不一样的value表明不一样的做业类型，靠数字标号来标记做业后期会形成混淆，难查
找以及不理解数字表明的具体做业类型。

解决方法：将做业类型提取到enum之中。添加name信息：

const HOMEWORK_TYPES = [
  {
    name: '黑盒测试',
    typeId: 52690,
  },
  {
    name: '白盒测试',
    typeId: 52691,
  },
  {
    name: '单元测试',
    typeId: 52692,
  },
  {
    name: '测试用例',
    typeId: 52693,
  },
  {
    name: '性能测试',
    typeId: 52694,
  },
];

结论：对于各类复杂的公共状态和经常使用类型变量均可以提取出来（为其添加其余属
性信息）,须要时再导入,让本身编写的代码更加优美规范。

代码精简和复用

本身在编写代码过程存在着同一段代码或者同一类似组件大量重复出现的状况,这

时就应该考虑提取封装成函数或者组件(细微的差别经过函数参数或组件props处理);

example:

{
          title: '静态检查',
          dataIndex: 'checkStyle',
          key: 'checkStyle',
          align: 'center',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: 'center', verticalAlign: 'middle'}} color={type}>
                {value}
              </Tag>
            );
          },
        },
        {
          title: '检查经过率',
          dataIndex: 'checkJunit',
          key: 'checkJunit',
          align: 'center',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: 'center', verticalAlign: 'middle'}} color={type}>
                {value}
              </Tag>
            );
          },
        },
        {
          title: '检查覆盖率',
          dataIndex: 'checkCoverage',
          key: 'checkCoverage',
          align: 'center',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: 'center', verticalAlign: 'middle'}} color={type}>
                {value}
              </Tag>
            );
          },
        },

        {
          title: '检查重复率',
          dataIndex: 'checkDuplicate',
          key: 'checkDuplicate',
          align: 'center',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: 'center', verticalAlign: 'middle'}} color={type}>
                {value}
              </Tag>
            );
          },
        },
        {
          title: '迟交',
          dataIndex: 'allowLateSubmission',
          align: 'center',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: 'center', verticalAlign: 'middle'}} color={type}>
                {value}
              </Tag>
            );
          },
        },

上述代码中均返回<Tag>标签,不一样的只是color和value,当返回组件内容较多时，考
虑将其封装成Class公共组件,经过组件props的color和value进行传递

封装组件：

import React, { PureComponent } from 'react';
import {
  Tag,
} from 'antd';

class StatusTag extends PureComponent {
  render() {
    const { color,value } = this.props;
    return (
      <Tag style={{ textAlign: 'center', verticalAlign: 'middle' }} color={color}>
        {value}
      </Tag>
    );
  }
}

export default StatusTag;

优势：减小代码量,提升复用性。