经过差不都三个多月的实践，本人对自己的React代码编程的规范有了进一步的加深了解

，在vue上有开源的文章和规范作为指导，在React方向上这方面少得可怜，因此本人结合自己在工作上的终结 摸索出这样的一套合理的符合代码编写风格的React_PC指南，注意由于我们使用的阿里家同款的所有技术栈，于是这里有些东西是我们比选的比如说

一、代码测层面的规范

1. 代码的布局如下

  1. // MyComponent
  2.  import React, { useState, useRef,useEffect, useCallback, useContext } from 'react' 
  5.  /** 
  6.   * Preset 
  7.   */ 
  10. const MyComponent = () => {
  11.  /** 
  12.   * state 
  13.   */ 
  16.  /** 
  17.   * method
  18.   */ 
  21.  /** 
  22.   * effct 
  23.   */ 
  26.  /** 
  27.   * componentsConfig 
  28.   */ 
  31.  /** 
  32.   * render
  33.   */ 
  34.  return(
  35.     <>
  36.      <h1>BMlaoli-coding....</h1>
  37.     </>
  38.    )
  39.  }
  41. export default MyComponent

2. 依赖包的美观程度

  1. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  2. import config from '@/utils/config';
  3. import ProTable from '@ant-design/pro-table';
  4. import { useRequest } from 'ahooks';
  5. import { Card, Input, Select, Tag, Popconfirm, Button } from 'antd';
  6. import { page, deleteArrange } from '@/services/service';
  7. import React, { useEffect, useRef, useState } from 'react';
  9. //以上的代码显得有些混乱。不过也是不要紧的
  10. /**
  11.  * 资产回收站Table表格
  12.  */
  13. import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
  14. import { Card, Button, message, Row, Col, Select, Form, Cascader, Space, Popconfirm, Alert, Input, } from 'antd';
  15. import { getHeader, deleteAsset, page, getTags } from '@/pages/Dashboard/services/assetDetail';
  16. import { getNamespace } from '@/pages/discovery/Setting/services/discoveryJob';
  17. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  18. import { getAssetModel } from '@/services/assetModel';
  19. import ProTable from '@ant-design/pro-table';
  20. import { PlusOutlined } from '@ant-design/icons';
  21. import { operate } from '@/services/recycle';
  22. import config from '@/utils/config';
  23. import { useRequest } from 'ahooks';
  24. import { Link } from 'umi';
  25. import DrawerHH from '../Drawer';
  26. import moment from 'moment'
  28. const { Option, OptGroup } = Select;
  30. //以上的代码需要非常注意的一点我一定要提醒你，如果包之间有明确的依赖关系，那你就不能这样做，会凉凉的
  31. //但是我们依然不推荐使用如上的格式，因为它会造成一些非必要的问题，如果你不是和我一样有强迫症 这个import导包的地方是非必要的，这样就差不多了

3. 注意事项

请注意给你的代码加上注释，我发现好多的朋友都必须会加注释，当一个项目组中有很多人共同完成很多的代码的时候，这样维护的成本是不可想象的 如果有重大bug或者有人离职了，那么它的代码将会无人看懂，逻辑的堆叠将会是不可开交的

  1. // 获取标签
  2.   const { run: getTageList } = useRequest(getTags, {
  3.     onSuccess: (result) => {
  4.       if (result && result.success) {
  5.         setTagList(result.data);
  6.         getColumns({ tableName: location.query.tableName });
  7.       }
  8.     },
  9.   });
  12.   /** 
  13.  * componentsConfig 
  14.  */
  15.   // 用户自定义的检索项 标签
  16.   const TagtSearch = (_, p) => {
  17.     return (
  18.       <Select mode="multiple" placeholder="请选择标签" showArrow
  19.         {...p}
  20.       >
  21.         { tagList.map((item) => (
  22.           <OptGroup label={item.name} key={item.id}>
  23.             {(item.tags ? item.tags : []).map((items) => (
  24.               <Option value={items.name} key={items.id}>
  25.                 {items.name}
  26.               </Option>
  27.             ))}
  28.           </OptGroup>
  29.         ))}
  30.       </Select>
  31.     )
  32.   }
  34.   // 网络域
  35.   const NamespaceSearch = (_, p) => {
  36.     return (
  37.       <Select placeholder="请选择网络域" {...p}>
  38.         {  namespace.map(item => (
  39.           <Option key={item.id} value={item.name}>{item.name}</Option>
  40.         ))}
  41.       </Select>
  42.     )
  43.   }
  45.   /** 
  46.    * method
  47.    */
  48.   /** 注意，这样的代码仅仅适用于，复杂的子程序注释，不要四处滥用
  49.    * 描述  
  50.    * 动态啊的获取表头
  51.    * @author lishizeng
  52.    * @date 2020-10-10
  53.    * @param {Array} data 获取的数据 
  54.    * @returns {any}
  55.    */
  56.   const dynamicSetColums = (value) => {
  58.     let data = value.map((item) => {
  59.       let valueType = 'text';
  60.       if (item.propertyType === 'DATETIME') {
  61.         valueType = 'dateTime';
  62.       } else if (item.propertyType === 'DATE') {
  63.         valueType = 'date';
  64.       } else if (item.propertyType === 'TIME') {
  65.         valueType = 'time';
  66.       }
  67.       const basicColumns = {
  68.         hideInSearch: !InCulde.includes(item.name),
  69.         title: item.name,
  70.         dataIndex: item.propertyName,
  71.         width: 200,
  72.         ellipsis: true,
  73.         sorter: tru
  74.         ......
  77.   // 你可以非常清晰的看到我的代码的注释，有些代码的注释比较复杂，@什么什么的，但是有的代码看起来比较的简单，只有 // 那么问题来了，我什么时候 *全注释什么时候用
  78.         //呢，我认为如果全部都是/*@*/那么 代码虽然很ok，但是这个和我们的开发效率是不符的
  79.        ，因此什么时候用/*@*/什么时候用//，我们还是看情况来配置是比价合适的
  81.  ----> 目前我个人比较推崇的规范是：
  82.         1. 一切以简单为主 // 
  83.         2. 如果是组件的东西 可以使用 /**/
  84.         3. 如果是代码复杂的地方，可以 
  85.            /** 
  86.              * 描述  
  87.              * 动态啊的获取表头
  88.              * @author lishizeng
  89.              * @date 2020-10-10
  90.              * @param {Array} data 获取的数据 
  91.              * @returns {any}
  92.              */
  93.         4. 原则，如果你编写注释的时间，耗费了你代码的时间，那么你应该考虑一下了，这样的代码注释是不是太有必要？

4. 一个不规范的代码&&一个编码风格良好的代码

以下的代码维护和可阅读性简直😭

  • 质量不是很好的代码示例 ```jsx import React, { useState, useRef, useEffect, useCallback, useContext, createRef } from ‘react’ import { Form, Drawer, Button, Input, Collapse, Row, Col, message, Select, Checkbox, Radio, Tree, Tabs, Space, DatePicker, Spin, Popover } from ‘antd’ import config from ‘@/utils/config’; import { CloseOutlined, MinusCircleOutlined, PlusOutlined } from ‘@ant-design/icons’ import { createCheckTaks, getTackById, getServieceScenes, getConfigByServieceScenes, getAssetLoctionByServieceScenes } from ‘../../service’ import TaskType from ‘./TaskType’ import TreeConfig from ‘./Tree’ import { useRequest } from ‘ahooks’ import { history, useModel } from ‘umi’; import Execution from ‘./ExecutionType’ import moment from ‘moment’ const { Panel } = Collapse; const { TabPane } = Tabs; import _ from ‘lodash’

/**

  • 预置方法 / const InspectionMode = ({ actionRef, visable, setVsiable, itemValue, setItemValue, formDefalutValues, setFormDefalutValues }) => { /*

    • 初始化数据 */ const [form] = Form.useForm(); const [propsTreeData, setPropsTreeData] = useState([]) const [treeDefaultDataChangeValue] = useState(‘VMWARE’) const { initialState } = useModel(‘@@initialState’);

    const [servieceScenesList, setServieceScenesList] = useState([])

    const [servieceScenesIdType, setServieceScenesIdType] = useState(null) const [servieceScenesId, setServieceScenesId] = useState(0) const [assetObjcet, setAssetObjcet] = useState([]) /**

    • 方法 */ const close = () => { setItemValue(Object.assign([], [])) form.resetFields(); setVsiable(false) setFormDefalutValues(null) };

    const { run: initServieceScenes, } = useRequest(getServieceScenes, { manual: true, onSuccess: (result, params) => { if (result && result.success) {

    1.  setServieceScenesList(_.filter(result.data, (v) => v.name !== '自定义'))

    } }, });

    const { run: initConfigByServieceScenes, } = useRequest(getConfigByServieceScenes, { manual: true, onSuccess: (result, params) => { if (result && result.success) {

    1.  if (servieceScenesIdType) {
    2.    initAssetLoctionByServieceScenes(servieceScenesId)
    3.  }

    } }, });

    const { run: initAssetLoctionByServieceScenes, } = useRequest(getAssetLoctionByServieceScenes, { manual: true, onSuccess: (result, params) => { if (result && result.success) {

    1.  setAssetObjcet(result.data)

    } }, });

    // 选择场景 const servieceScenesChange = (value, b, c) => { setServieceScenesIdType(b.typeS) setServieceScenesId(value) }

    useEffect(() => { // if(itemValue.length>0){ // } // // setServieceScenesIdType(() => { // // if (itemValue.assetIdList === 0) { // // return 1 // // } else { // // return 0 // // } // // })

    if (servieceScenesId) { initConfigByServieceScenes(servieceScenesId) } }, [servieceScenesId])

    const onSubmit = () => { if (propsTreeData.length == 0) { message.error(‘请至少选择一个检查项！’) return } form .validateFields() .then(async (values) => {

    1.  // console.log(values);
    2.  let FormObject = {
    3.    id: values.id ? values.id : undefined,
    4.    name: values.name,
    5.    taskType: values.ip ? 2 : 1,
    6.    performStatus: values.performStatus,
    7.    performTimeSource: values.performStatus == 1 ?
    8.      moment(values.performTimeSourceE).format('YYYY-MM-DD hh:mm:ss') :
    9.      values.performTimeSource,
    10.    description: values.description || '',
    11.    userId: values.userId,
    12.    userName: values.userName,
    13.    configIdList: propsTreeData,
    14.    serviceVersionId: values.serviceVersionId || 1,
    15.    adviceObjectList: !values.ip ? null : [{
    16.      ip: values.ip,
    17.      user: values.user,
    18.      password: values.password
    19.    }],
    20.    assetIdList: values.assetIdList
    21.  }
    23.  console.log(FormObject, '+++>');
    25.  const { success } = await createCheckTaks(FormObject)
    26.  if (success) {
    27.    message.success('设置成功')
    28.  }
    29.  actionRef.current.reload()
    30.  form.resetFields();
    31.  setItemValue(Object.assign([], []))
    32.  setFormDefalutValues(null)
    33.  setVsiable(false)

    }) .catch((info) => {

    1.  console.log(info);

    }); }

    const handleChange = (value) => { }

    const initItemValue = async (value) => { try { const { data } = await getTackById(value) setFormDefalutValues(data) } catch (error) { message.error(error) } }

    // 级联检查项 const callback = () => { }

    /**

    • 生命周期 */ useEffect(() => { initServieceScenes() }, [itemValue])

    /**

    • 组件配置 */ // 指定任务执行时间，展开项组件 // Drawer页脚 const DrawerFooter = () => { return (
      ) }

/**

  • 视图 */ return ( <> } destroyOnClose={true} width={800} footer={DrawerFooter()} >

    { }} size=”large” layout=”horizontal” > prevValues.serviceVersionId !== currentValues.serviceVersionId} > {({ getFieldValue }) => { return getFieldValue(‘serviceVersionId’) ? ( <> { servieceScenesIdType ? ( ) : ( <> </> ) } </> ) : null; }}

    </> ) }

export default InspectionMode

  2. > _**上述代码的诟病：**
  3. > 1. 整体的规范布局凌乱，比如state没有写在一起
  4. > 1. 组件没有很好的分离，过多的if else 嵌套和判断，让你头昏脑涨
  6. - [x] 质量还不错的代码示例
  7. ```jsx
  8. /**
  9.  * 资产回收站Table表格
  10.  */
  11. import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
  12. import { Card, Button, message, Row, Col, Select, Form, Cascader, Space, Popconfirm, Alert, Input, PageHeader } from 'antd';
  13. import { getHeader, deleteAsset, page, getTags } from '@/pages/Dashboard/services/assetDetail';
  14. import { getNamespace } from '@/pages/discovery/Setting/services/discoveryJob';
  15. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  16. import { getAssetModel } from '@/services/assetModel';
  17. import ProTable from '@ant-design/pro-table';
  18. import { PlusOutlined } from '@ant-design/icons';
  19. import { operate } from '@/services/recycle';
  20. import config from '@/utils/config';
  21. import { useRequest } from 'ahooks';
  22. import { Link, history } from 'umi';
  23. import DrawerHH from '../Drawer';
  24. import moment from 'moment'
  25. const { Option, OptGroup } = Select;
  27. /** 
  28.  * Preset 
  29.  */
  30. const layout = {
  31.   labelCol: { span: 6 },
  32.   wrapperCol: { span: 18 },
  33. };
  34. let x = 200;
  35. let InCulde = ['资产编号', '资产名称', '网络域'];
  36. const RecycleDetail = ({ location }) => {
  37.   /** 
  38.    * state 
  39.    */
  40.   const actionRef = useRef(null);
  41.   const [size, setSize] = useState('middle');
  42.   const [tableNames, setTableNames] = useState(location.query.tableName);
  43.   const [columns, setColumns] = useState([]);
  44.   const [basicProps, setBasicProps] = useState({ drawerVisible: false });
  45.   const [namespace, setNamespace] = useState([]);
  46.   const [tagList, setTagList] = useState([]);
  47.   const [otheSearch, setOtheSearch] = useState({
  48.     sorter: null,
  49.     sortOrder: null,
  50.     tableName: location?.query?.tableName,
  51.     del: 1,
  52.     state: 0,
  53.   })
  55.   // 获取名称列表
  56.   const { run: getNameSpaceList } = useRequest(getNamespace, {
  57.     onSuccess: (result) => {
  58.       if (result && result.success) {
  59.         setNamespace(result.data);
  60.       }
  61.     },
  62.   });
  64.   // 获取标签
  65.   const { run: getTageList } = useRequest(getTags, {
  66.     onSuccess: (result) => {
  67.       if (result && result.success) {
  68.         setTagList(result.data);
  69.         getColumns({ tableName: location.query.tableName });
  70.       }
  71.     },
  72.   });
  75.   /** 
  76.  * componentsConfig 
  77.  */
  78.   // 用户自定义的检索项 标签
  79.   const TagtSearch = (_, p) => {
  80.     return (
  81.       <Select mode="multiple" placeholder="请选择标签" showArrow
  82.         {...p}
  83.       >
  84.         { tagList.map((item) => (
  85.           <OptGroup label={item.name} key={item.id}>
  86.             {(item.tags ? item.tags : []).map((items) => (
  87.               <Option value={items.name} key={items.id}>
  88.                 {items.name}
  89.               </Option>
  90.             ))}
  91.           </OptGroup>
  92.         ))}
  93.       </Select>
  94.     )
  95.   }
  97.   // 网络域
  98.   const NamespaceSearch = (_, p) => {
  99.     return (
  100.       <Select placeholder="请选择网络域" {...p}>
  101.         {  namespace.map(item => (
  102.           <Option key={item.id} value={item.name}>{item.name}</Option>
  103.         ))}
  104.       </Select>
  105.     )
  106.   }
  108.   /**
  109.    * 
  110.    * renderFormItem: TimeLimit,
  111.         formItemProps: {
  112.           label: "选择时间",
  113.         }, 
  114.    */
  116.   /** 
  117.    * method
  118.    */
  119.   /**
  120.    * 描述
  121.    * 动态啊的获取表头
  122.    * @author lishizeng
  123.    * @date 2020-10-10
  124.    * @param {Array} data 获取的数据 
  125.    * @returns {any}
  126.    */
  127.   const dynamicSetColums = (value) => {
  128.     let data = value.map((item) => {
  129.       // 目前的方案是 先全部排序，然后给定几个范围去掉排序，排序的信息来源一定是表头数据
  130.       let sorter = false;
  131.       let valueType = 'text';
  132.       if (item.propertyType === 'DATETIME') {
  133.         valueType = 'dateTime';
  134.         sorter = true;
  135.       } else if (item.propertyType === 'DATE') {
  136.         valueType = 'date';
  137.         sorter = true;
  138.       } else if (item.propertyType === 'TIME') {
  139.         valueType = 'time';
  140.         sorter = true;
  141.       } else if (item.propertyType === 'INT') {
  142.         sorter = true;
  143.       }
  144.       const basicColumns = {
  145.         hideInSearch: !InCulde.includes(item.name),
  146.         title: item.name,
  147.         dataIndex: item.propertyName,
  148.         width: 200,
  149.         ellipsis: true,
  150.         sorter,
  151.         valueType,
  152.         renderFormItem: (_, p, form) => {
  153.           if (item.name === '网络域') {
  154.             return NamespaceSearch(_, p)
  155.           }
  156.           if (_.valueType === 'text') {
  157.             return <Input placeholder={`请输入${p.label}`} {...p} />;
  158.           } else {
  159.             return p.defaultRender(_);
  160.           }
  161.         },
  162.         render: (_, record) => {
  163.           if (record[item.propertyName]) {
  164.             if (item.propertyType === 'DATETIME') {
  165.               return (<Tooltip title={moment(record[item.propertyName]).format('YYYY-MM-DD HH:mm:ss')}>{moment(record[item.propertyName]).format('YYYY-MM-DD HH:mm:ss')}</Tooltip>)
  166.             } else if (item.propertyType === 'DATE') {
  167.               return (<Tooltip title={moment(record[item.propertyName]).format('YYYY-MM-DD')}>{moment(record[item.propertyName]).format('YYYY-MM-DD')}</Tooltip>)
  168.             } else if (item.propertyType === 'TIME') {
  169.               return (<Tooltip title={moment(record[item.propertyName]).format('HH:mm:ss')}>{moment(record[item.propertyName]).format('HH:mm:ss')}</Tooltip>)
  170.             } else {
  171.               return _
  172.             }
  173.           } else {
  174.             return '-';
  175.           }
  176.         },
  177.       };
  178.       // x += 200;
  179.       return basicColumns;
  180.     });
  182.     data.push({
  183.       title: '标签',
  184.       dataIndex: 'tag',
  185.       width: 200,
  186.       renderFormItem: (_, p, form) => {
  187.         return TagtSearch(_, p)
  188.       }
  189.     })
  191.     data.push({
  192.       title: '操作',
  193.       dataIndex: 'id',
  194.       width: 200,
  195.       hidden: false,
  196.       default: true,
  197.       sorter: false,
  198.       valueType: 'option',
  199.       fixed: 'right',
  200.       render: (text, obj) => {
  201.         return [
  202.           <a
  203.             key="1"
  204.             style={{ marginRight: 5 }}
  205.             onClick={() =>
  206.               openDetail({
  207.                 id: obj._id,
  208.                 tableName: tableNames,
  209.                 ciTypeId: obj.ciTypeId,
  210.                 name: obj.name,
  211.               })
  212.             }
  213.           >
  214.             详情
  215.           </a>,
  216.           <a key="2" >
  217.             <Popconfirm
  218.               title="您确认要恢复吗?"
  219.               onConfirm={() => operateRun({ id: obj._id, ciTypeId: obj.ciTypeId, type: '0' })}
  220.               okText="是"
  221.               cancelText="否"
  222.             >
  223.               恢复
  224.             </Popconfirm>
  225.           </a>,
  226.           <a key="3" >
  227.             <Popconfirm
  228.               title="您确认要清空吗?"
  229.               onConfirm={() => operateRun({ id: obj._id, ciTypeId: obj.ciTypeId, type: '1' })}
  230.               okText="是"
  231.               cancelText="否"
  232.             >
  233.               清空
  234.             </Popconfirm>
  235.           </a>,
  236.         ];
  237.       },
  238.     });
  239.     setColumns(data);
  240.   }
  242.   // 获取动态表头
  243.   const { run: getColumns, loading } = useRequest(getHeader, {
  244.     manual: true,
  245.     onSuccess: (result) => {
  246.       if (result && result.success) {
  247.         dynamicSetColums(result.data)
  248.       } else {
  249.         message.error(result.message || '网络请求错误', 5);
  250.       }
  251.     },
  252.   });
  254.   // 打开详情
  255.   const { run: operateRun } = useRequest(operate, {
  256.     manual: true,
  257.     onSuccess: (result) => {
  258.       if (result && result.success) {
  259.         message.success(result.codeMessage);
  260.         actionRef.current.reload();
  261.       }
  262.     },
  263.   });
  265.   // 表格的数据加载方法
  266.   const loadData = async (params) => {
  267.     const response = await page(params);
  268.     return {
  269.       success: response.success,
  270.       ...response.data.list
  271.     };
  272.   };
  274.   const onTableChange = (p, f, s) => {
  275.     setOtheSearch((oldData) => {
  276.       return {
  277.         ...oldData,
  278.         ...{
  279.           sorter: s.field || '',
  280.           sortOrder: s.order || ''
  281.         }
  282.       }
  283.     })
  284.   };
  286.   const drawerProps = {
  287.     ...basicProps,
  288.     onClose: () => {
  289.       setBasicProps({
  290.         drawerVisible: false,
  291.         id: undefined,
  292.         tableName: undefined,
  293.       });
  294.     },
  295.   };
  297.   const openDetail = (data) => {
  298.     setBasicProps({
  299.       ...data,
  300.       drawerVisible: true,
  301.     });
  302.   };
  305.   /** 
  306.    * effct 
  307.    */
  308.   useEffect(() => {
  309.     if (location.query.tableName) {
  310.       setOtheSearch((oldData) => {
  311.         return { ...oldData, ...{ tableName: location.query.tableName } }
  312.       })
  313.       getNameSpaceList();
  314.       getTageList();
  315.     }
  316.   }, [location.query.tableName]);
  319.   /** 
  320.    * render
  321.    */
  322.   return (
  323.     <PageHeaderWrapper
  324.       onBack={() => history.push({ pathname: '/recycle' })}
  325.       title='资产回收站'
  326.     >
  327.       <Card loading={loading}>
  328.         <ProTable
  329.           search={{
  330.             labelWidth: 0,
  331.             optionRender: (a, b) => {
  332.               return [<Button key='id' type='primary' onClick={() => b.form.submit()} > 查询 </Button>, <Button key='id' onClick={() => {
  333.                 b.form.resetFields(); b.form.submit();
  334.                 // setUseList({
  335.                 //   userIdList: ''
  336.                 // })
  337.               }}> 重置 </Button>]
  338.             }
  339.           }}
  340.           beforeSearchSubmit={(T) => {
  341.             if (T.tag && T.tag.length > 0) {
  342.               T.tag = T.tag.join(',')
  343.             }
  344.             return T
  345.           }}
  346.           onReset={() => {
  347.             setOtheSearch(
  348.               (oldData) => {
  349.                 oldData.namespace = ''
  350.                 oldData.tags = ''
  351.                 return oldData
  352.               }
  353.             )
  354.           }}
  355.           size={size}
  356.           onSizeChange={(size) => {
  357.             setSize(size);
  358.           }}
  359.           columns={columns}
  360.           actionRef={actionRef}
  361.           request={(params) => loadData(params)}
  362.           params={{
  363.             ...otheSearch
  364.           }}
  365.           rowKey="_id"
  366.           onChange={(p, f, s) => onTableChange(p, f, s)}
  367.           pagination={config.paginationDisplay}
  368.           scroll={{ x: x, y: 450 }}
  369.         />
  370.       </Card>
  371.       <DrawerHH {...drawerProps} />
  372.     </PageHeaderWrapper>
  373.   )
  374. }
  376. export default RecycleDetail

5. 不要在request请求文件中，搞这些花里胡哨的东西

反面教材

  1. import http from '@/utils/request'
  2. import qs from 'qs'
  3. import moment from 'moment'
  4. // 模拟接口
  5. const getInsepectionStatic = async () => {
  6.   return http.get('/api/itcc-ops-provider/taskRecord/statisticalPresetType')
  7. }
  9. const queryInsepectionTable = async (value) => {
  10.   let parms = {
  11.     name: value.name && value.name || '',
  12.     userIdList: value.userIdList ? value.userIdList : '',
  13.     startTimeStr: value.startTimeStr || '',
  14.     endTimeStr: value.endTimeStr || '',
  15.     sorter: value.sorter,
  16.     sortOrder: value.sortOrder,
  17.     current: value.current,
  18.     pageSize: value.pageSize
  19.   }
  20.   return http.get(`/api/itcc-ops-provider/task/page?${qs.stringify(parms)}`)
  21. }
  23. // ---------------------------分割线
  24. // 获取角色下面的所有用户（按名称升序）
  25. const getDefaultUser = async (parmas) => {
  26.   return http.get(`/api/tcms-auth-provider/user/getByRoleId?roleId=${parmas}`)
  27. }
  29. // 预设类型 （环境 ）下拉框
  30. const getDefaultCheckType = async () => {
  31.   // return http.get('/api/itcc-ops-provider/serverVersions/list')
  32.   return http.get('/api/itcc-ops-provider/procedureLayout/support/environment')
  33. }
  35. // 检查项预设对应自己定义的就是VMWARE
  36. const getDefaultCheckItem = async (value) => {
  37.   return http.get(`/api/itcc-ops-provider/adviceConfig/tree/${value || 1}`)
  38. }
  40. // 新增巡检任务&编辑
  41. const createCheckTaks = async (value) => {
  42.   return http.post(`/api/itcc-ops-provider/task/saveOrUpdate`, { data: value })
  43. }
  47. // 获取健康评估分类列表(默认页)
  48. const getScanResultList = (parmas) => {
  49.   return http.get(`/api/itcc-ops-provider/scanResult/getScanResultList?${qs.stringify(parmas)}`)
  50. }
  52. // 健康评估表格分页列表
  53. const getScanResultListForTable = (parmas) => {
  55.   function toLowerLine (str) {
  56.     var temp = str.replace(/[A-Z]/g, function (match) {
  57.       return "_" + match.toLowerCase();
  58.     });
  59.     if (temp.slice(0, 1) === '_') { //如果首字母是大写，执行replace时会多一个_，这里需要去掉
  60.       temp = temp.slice(1);
  61.     }
  62.     return temp;
  63.   }
  64.   parmas.module = !parmas.module ? null : parmas.module
  65.   let finallyDate = Object.assign(
  66.     {
  67.       taskId: null,
  68.       performCount: null,
  69.       name: parmas.name || null,
  70.       priority: null,
  71.       module: null,
  72.       serviceVersionId: null,
  73.       type: null,
  74.       sorter: null,
  75.       sortOrder: null,
  76.       current: null,
  77.       pageSize: null,
  78.     }, parmas)
  79.   finallyDate.sorter = toLowerLine(finallyDate.sorter)
  81.   return http.get(`/api/itcc-ops-provider/scanResult/page?${qs.stringify(finallyDate)}`)
  82. }
  84. // 导出
  85. const getScanResultListTabledDownload = (parmas) => {
  86.   let finallyDate = Object.assign(
  87.     {
  88.       taskId: null,
  89.       performCount: null,
  90.       name: parmas.refName || null,
  91.       priority: null,
  92.       module: null,
  93.       serviceVersionId: null,
  94.       type: null,
  95.       sorter: null,
  96.       sortOrder: null,
  97.     }, parmas)
  98.   return http.get(`/api/itcc-ops-provider/scanResult/download/list?${qs.stringify(finallyDate)}`)
  99. }

正确的做法

  1. /*** 某网络域下的网络列表 */
  2. // 获取ip域下的网络列表
  3. const getIPall = async (params: any) => {
  4.   return request.get(`/api/itcc-cmdb-provider/network/page?${qs.stringify(params)}`)
  5. }
  6. // 创建和编辑
  7. const createEdite = async (params: any) => {
  8.   return request.post('/api/itcc-cmdb-provider/network/saveOrUpdate', { data: params })
  9. }
  10. // 删除
  11. const deleteIp = async (params: any) => {
  12.   return request.delete(`/api/itcc-cmdb-provider/network/delete?id=${params}`)
  13. }
  14. // 网段管理
  15. const createShortMange = async (params: any) => {
  16.   return request.post(`/api/itcc-cmdb-provider/network/ipManagement`, { data: params })
  17. }
  20. /** 网络段映射的管理 */
  21. // 根据id获取网络段
  22. const initNetwordShort = async (params: any) => {
  23.   return request.get(`/api/itcc-cmdb-provider/network/get?id=${params}`)
  24. }
  25. // 保留OCCUPY 使用USE 释放FREE
  26. const createNetworkRelation = async (params: any) => {
  27.   return request.post(`/api/itcc-cmdb-provider/ip/releaseOrRetain`, { data: params })
  28. }
  31. /**
  32.  * 网络关联选择
  33.  */
  34. // 获取默认的可选中器
  35. const defaultNetwork = async () => {
  36.   return request.get('/api/itcc-cmdb-provider/network/associatedNetWork')
  37. }
  38. // 创建关联关系
  39. const buildNetworkRelations = async (params: any) => {
  40.   console.log('create====>', params);
  41.   return request.post('/api/itcc-cmdb-provider/poolVswitch/saveOrUpdate', { data: params })
  42. }
  43. // 选中网络的关联关系
  44. const getNetworkRelations = async (params: any) => {
  45.   return request.get(`/api/itcc-cmdb-provider/network/selectPool?id=${params}`)
  46. }
  49. export {
  50.   defaultNetwork, buildNetworkRelations, getNetworkRelations,
  51.   initNetwordShort, createNetworkRelation,
  52.   getIPall, createEdite, deleteIp, createShortMange,
  53.   getList, del, save, page,
  54.   networkSave, networkDel, validation,
  55. }

6. 变量名我就不多说了，详见（谷歌公司文档规范：https://google.github.io/styleguide/jsguide.html）

  1. 原则就是 见名知意，长点没关系

    7. 缩进统一使用两个table

8.有关于到底是不是后面加上分号 ；

js中没有强制使用 ；要求，在现代的的框架中，包括前端三驾马车，都会经过bable转义自己写的js代码。因此我认为从这一点出发 ；号是非必要的 在很多优秀的库中，；号也是没有强制要求的 image.png 下面的这段代码分别来自框架内部源代码 image.png image.png

总结：我认为在这件事情的探讨过度，无疑是浪费时间的东西!!,

二、代码构建模式上的说明

1.IDE的快捷键的学习

  • IDE的快捷键的学习
  • 打开终端 ( ctrl + ` ) 终端新开( ctrl + shift + 5 )， 终端内部切换( alt + 上下左右 ) ， 切换终端组（）
  • 指定工作目录 新建终端 （ ctrl + shift + ` ）
  • 分屏和切换屏: 新开一个分屏（ ctrl + \ ），切换分屏（ ctrl + up 或者 down ），关闭某一个分屏 （ ctrl + w ） ，屏内组切换( ctrl + k 之后 ctrl + up或者down )
  • 打开指定文件( ctrl + shift + p )，切换到工作树
  • 浏览的操作。依然还是需要鼠标的

2.有关于打包的问题

  • 有关于打包的问题
  • 打包更新下午的时候一次，晚上的时候一次
  • 任务点击的时候也是，中午一次，晚上一次，只有这样才能通知哪些已经确认人去确认，注意啊。你确认过的任务一定是先发包再点击完成！

3.Modal和draw构建方式（各种弹出层的处理）

  • 由于modal和draw这两个东西和当前的页面组件的通信和依赖比较的严重，不好也不是很适合解耦出去，因此，现行我认为比较好的构建方式如下
  • 核心代码
    1. const props = {
    2.   visible,
    3.   loading,
    4.   obj,
    5.   onCancel: () => {
    6.     setVisible(false);
    7.     setObj(false);
    8.   },
    9.   onSubmit: (values: any) => {
    10.     saveData(values);
    11.   },
    12. };
  1. // NetworkDomain 网络规划
  2. import React, { useState, useRef } from 'react'
  3. import { useRequest } from 'ahooks';
  4. import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
  5. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  6. import config from '@/utils/config';
  7. import { Button, Space, message, Popconfirm, Card, } from 'antd';
  8. import { page, networkSave, networkDel } from './service';
  9. import AddModal from './AddModal';
  10. import { SizeType } from 'antd/lib/config-provider/SizeContext';
  11. import { Link } from 'umi';
  13. /** 
  14.  * Preset 
  15.  */
  18. const NetworkDomain: React.FC<any> = () => {
  19.   /** 
  20.    * state 
  21.    */
  22.   const actionRef = useRef<ActionType>();
  24.   const [size, setSize] = useState<SizeType>('middle');
  25.   const [sorter, setSorter] = useState<any>('');
  26.   const [sortOrder, setSortOrder] = useState<any>('');
  27.   const [visible, setVisible] = useState<boolean>(false);
  28.   const [obj, setObj] = useState<boolean>(false);
  30.   /** 
  31.    * method
  32.    */
  33.   const onTableChange = (p: any, f: any, s: any) => {
  34.     setSorter(s.field || '');
  35.     setSortOrder(s.order || '');
  36.   };
  39.   const { run: delData } = useRequest(networkDel, {
  40.     manual: true,
  41.     onSuccess: (result) => {
  42.       if (result.success) {
  43.         actionRef.current?.reset()
  44.         actionRef.current?.reload()
  45.       }
  46.     },
  47.   });
  49.   const { run: saveData, loading } = useRequest(networkSave, {
  50.     manual: true,
  51.     onSuccess: (result, params) => {
  52.       actionRef?.current?.reload();
  53.       if (result.success) {
  54.         result.data && message.success(result.codeMessage);
  55.         setVisible(false);
  56.         setObj(false);
  57.       }
  58.     },
  59.   });
  61.   const loadData = async (params: any) => {
  62.     const response = await page(params);
  63.     return {
  64.       success: response.success,
  65.       ...response.data,
  66.     };
  67.   };
  69.   const handleEdit = (obj: any) => {
  70.     setObj(obj);
  71.     setVisible(true);
  72.   };
  73.   const handleDel = (id: any) => {
  74.     delData(id);
  75.   };
  76.   const props = {
  77.     visible,
  78.     loading,
  79.     obj,
  80.     onCancel: () => {
  81.       setVisible(false);
  82.       setObj(false);
  83.     },
  84.     onSubmit: (values: any) => {
  85.       saveData(values);
  86.     },
  87.   };
  89.   /** 
  90.    * effct 
  91.    */
  94.   /** 
  95.    * componentsConfig 
  96.    */
  97.   const header = (
  98.     <Space>
  99.       <Button
  100.         size={size}
  101.         type="primary"
  102.         onClick={() => {
  103.           setVisible(true);
  104.         }}
  105.       >
  106.         新增
  107.       </Button>
  108.     </Space>
  109.   );
  111.   const columns: ProColumns<any>[] = [
  112.     {
  113.       title: '名称',
  114.       key: 'name',
  115.       dataIndex: 'name',
  116.       render: (_, dom) => {
  117.         return <Link
  118.           to={{
  119.             pathname: '/networkDomain/networkShort',
  120.             state: {
  121.               areaId: dom.id,
  122.               name: dom.name,
  123.               description: dom.description
  124.             },
  125.           }}
  126.         >{_}</Link>
  127.       }
  128.     },
  129.     {
  130.       title: '描述',
  131.       dataIndex: 'description',
  132.       ellipsis: true,
  133.     },
  134.     {
  135.       title: '操作',
  136.       valueType: 'option',
  137.       dataIndex: 'id',
  138.       width: 200,
  139.       fixed: 'right',
  140.       render: (text: any, record: any) => (
  141.         <>
  142.           <Space>
  143.             {/* <Tag color={config.editColor}> */}
  144.             <a onClick={() => handleEdit(record)}>编辑</a>
  145.             {/* </Tag> */}
  146.             {/* <Tag color={config.deleteColor}> */}
  147.             <a>
  148.               <Popconfirm
  149.                 title="您确认要删除该全局属性么?"
  150.                 onConfirm={() => handleDel(record.id)}
  151.                 okText="是"
  152.                 cancelText="否"
  153.               >
  154.                 删除
  155.                 </Popconfirm>
  156.             </a>
  157.             {/* </Tag> */}
  158.           </Space>
  159.         </>
  160.       ),
  161.     },
  162.   ];
  165.   /** 
  166.    * render
  167.    */
  168.   return (
  169.     <PageHeaderWrapper title="网络域规划">
  170.       <Card >
  171.         <div style={{ minHeight: 650 }}>
  172.           <ProTable
  173.             actionRef={actionRef}
  174.             columns={columns}
  175.             request={(params) => loadData(params)}
  176.             params={{ sorter, sortOrder }}
  177.             size={size}
  178.             rowKey="id"
  179.             headerTitle={header}
  180.             // rowSelection={{}}
  181.             search={false}
  182.             tableAlertRender={() => false}
  183.             onSizeChange={(size) => setSize(size)}
  184.             onChange={(p, f, s) => onTableChange(p, f, s)}
  185.             pagination={config.paginationDisplay}
  186.             scroll={{ x: 1250, y: 450 }}
  187.             toolBarRender={(action, { selectedRows }) => []}
  188.           />
  189.           <AddModal {...props} />
  190.         </div>
  191.       </Card>
  192.     </PageHeaderWrapper>
  193.   )
  194. }
  196. export default NetworkDomain
  201. // AddModal 网络域新增编辑的弹出层
  202. import React, { useState, useRef, useEffect, useCallback, useContext } from 'react'
  203. import config from '@/utils/config';
  204. import { Form, Input, Modal } from 'antd';
  205. import { validation } from './service'
  207. /** 
  208.  * Preset 
  209.  */
  210. const { TextArea } = Input;
  213. const AddModal: React.FC<any> = ({ obj = {}, visible, onCancel, onSubmit, loading }) => {
  214.   /** 
  215.    * state 
  216.    */
  217.   const [form] = Form.useForm();
  220.   /** 
  221.    * method
  222.    */
  223.   const onOk = () => {
  224.     form
  225.       .validateFields()
  226.       .then((values) => {
  227.         const data = { ...values }
  228.         if (obj.id) {
  229.           data.id = obj.id
  230.         }
  231.         onSubmit({ ...data });
  232.       })
  233.       .catch((info) => {
  234.         console.log('Validate Failed:', info);
  235.       });
  236.   };
  238.   const close = () => {
  239.     clear();
  240.     onCancel();
  241.   };
  243.   const clear = () => {
  244.     form.resetFields();
  245.   };
  247.   const validationName = (rule, value, callback) => {
  248.     try {
  249.       let data = {}
  250.       if (obj && obj.id) {
  251.         data.id = obj.id
  252.       }
  253.       data.name = value
  254.       validation(data).then((res) => {
  255.         if (res && res.data && res.success) {
  256.           callback();
  257.         } else {
  258.           callback('网络域已存在');
  259.         }
  260.       })
  261.       data = null
  262.     } catch (err) {
  263.       callback(err);
  264.     }
  265.   }
  268.   /** 
  269.    * effct 
  270.    */
  271.   useEffect(() => {
  272.     if (visible) {
  273.       form.setFieldsValue({
  274.         ...obj,
  275.       });
  276.     }
  277.   }, [visible]);
  280.   /** 
  281.    * componentsConfig 
  282.    */
  285.   /** 
  286.    * render
  287.    */
  288.   return (
  289.     <>
  290.       <Modal
  291.         visible={visible}
  292.         title={`${obj.id ? '编辑网络域' : '新增网络域'}`}
  293.         onCancel={() => close()}
  294.         confirmLoading={loading}
  295.         afterClose={() => clear()}
  296.         width={700}
  297.         okText="提交"
  298.         cancelText="取消"
  299.         onOk={() => onOk()}
  300.       >
  301.         <Form form={form} layout="horizontal" name="networkForm">
  302.           <Form.Item
  303.             {...config.modalFormItemLayout}
  304.             label="网络域"
  305.             name="name"
  306.             rules={[
  307.               {
  308.                 required: true,
  309.                 message: '请输入网络域名称',
  310.               },
  311.               { validator: validationName },
  312.             ]}
  313.           >
  314.             <Input placeholder="请输入网络域名称" />
  315.           </Form.Item>
  317.           <Form.Item
  318.             label="描述"
  319.             {...config.modalFormItemLayout}
  320.             name="description">
  321.             <TextArea />
  322.           </Form.Item>
  324.         </Form>
  325.       </Modal>
  326.     </>
  327.   )
  328. }
  330. export default AddModal

4. 文件夹层次的构建方案和命名方案

个人推荐的做法
page下仅仅是放页面用来组装组件，而不应该存放各种各样的组件的具体实现，component里了解一下，component里才是放置具体组件的所在位置
image.png

5.如何只tabl中构建一些独立且又各自有状态的组件？

我们先来看看，你如何完成如下的效果

很明显，要想实现这样的效果你必须让没一个row数据都搞定独立的加载一个组件出来,这个时候，性能和效果就要做取舍了