代碼優化 (一）：狀態提取和代碼複用

狀態的提取和封裝

編寫代碼聲明變量的過程當中常常會存在各類狀態或者類型的初始化。最開始參與項目的

過程當中會直接使用未通過處理封裝的數據,若後期更改時將難以查找和修改。

解決方法：

• 提取出全局的狀態或變量
• 給其添加說明和其餘屬性(封裝到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;

優勢：減小代碼量,提升複用性。