思考：

  • 提取基础组件和公用方法会带来什么好处？
  • 一窥全貌： 当你在阅读一个500行代码的文件时，你会怎么做？
    • 我们该如何写代码才能十秒钟就可以看完代码全貌呢

  • 步骤与细节：

    • 在你写代码的时候，在你要修改某个缺陷bug的时候,你是不是总是会用vscode工具去折叠那些我们不去关注的代码和方法呢，也就是其实我们在写完代码的时候，我们就已经知道这些方法是用来做什么的了。我们只需要知道方法名，就知道他的功能，而不再需要去了解该方法是如何实现的。
    • 总结来说: 在我们阅读代码的时候,我们只需要关注我们实现组件的步骤就能知道这个组件是做什么的了，而不需要去了解这些组件步骤是怎么去实现的。

      一个Hooks组件是如何构成的

  • 这里是一个示例，可快速下拉略过此处代码（）。

    造成的原因

    是什么原因导致这个组件主文件的代码能达到569行的呢？

  • 在该文件UI渲染阶段前，含有众多已经实现了的方法。在这里我想问个问题，在阅读这个文件时，我们第一时间会去关注这些方法是怎么实现的吗？我们第一时间只会关注这些方法用途是什么？而不是去关注这些方法是怎么实现的（所以我们是不是只需要知道它们的名字就好了）。

  • 这里呢？就关系到步骤与细节的区别了。因为我们没有分清楚什么是步骤，什么是实现的细节。当我们把步骤和细节写在一起的时候，灾难也就发生了。

    分析主文件含有的步骤

    根据上面的例子，按照功能模块分类，大体分为以下三块

  • Hooks的相关操作

  • 不涉及到Hooks的逻辑处理函数
  • UI渲染部分

因此我们可以将我们的主文件代码目录分解成如下的样子：

  1. |— container
  2.     |— entity // 存储常量
  3.     |— hooks.js // 各种自定义的 hooks
  4.     |— handler.js // 转换函数，以及不需要 hooks 的事件处理函数
  5.     |— component // 子组件
  6.       |— handle.js
  7.       |— hooks.js
  8.       |— index.js
  9.       |— index.less
  10.     |— index.js // 主文件，只保留实现的业务步骤
  11.     |— index.css // css 文件

拆分后的代码内容

主文件代码

主文件只保留业务步骤

  • hooks的引入
  • handle方法的引入
  • UI渲染

按照这样拆解后，主文件代码立马降到了84行，这个组件用到了哪些方法，哪些hooks变量也因此一目了然。

  1. /*
  2.  * @Author: SQYun
  3.  * @Name: 组件名称
  4.  * @State: [ enums]
  5.  * @Function: [function1, function2, ....]
  6.  * @Component: [Table(内部组件库的table组件)]
  7.  * @Date: 2020-10-14 14:11:48
  8.  */
  9. import React, { useEffect } from 'react'
  10. import { Input, Button, message, Modal, Col, ConfigProvider, DatePicker  } from 'antd'
  11. import { Table } from '@hz-components/react-base'
  12. import SearchBar from './SearchBar'
  13. import styles from './index.less'
  15. import handle from './handle' // 逻辑方法
  16. import useHooks from './hooks'
  18. function FaceControl() {
  20.   const [
  21.     dictionary,
  22.     tableRef,
  23.     showReducer,
  24.     showDispatch
  25.   ] = useHooks()
  27.   const {
  28.     createColumns,
  29.     createPromise,
  30.     createHandleBarOptions,
  31.     createSearchBarOptions,
  32.     getListFromDictionaryByItem
  33.   } = handle
  35.   return (
  36.       <div
  37.         className={styles.main}
  38.       >
  39.         <Table
  40.           rowKey="id"
  41.           columns={createColumns(tableRef, dictionary, showReducer, showDispatch)}
  42.           createPromise={createPromise}
  43.           setRef={listRef => {
  44.             tableRef.current = listRef
  45.           }}
  46.           hasSerialNo
  47.           hasDefaultLayout
  48.           antdProps={。。。}
  49.           handleBarOptions={createHandleBarOptions(tableRef)}
  50.           searchBarOptions={createSearchBarOptions(dictionary,)}
  51.           transformQuery={params => {
  52.             。。。
  53.           }}
  54.         />
  55.       </div>
  56.   )
  57. }
  59. export default FaceControl

HandleJs代码

  1. /*
  2.  * @Name: 函数的逻辑处理
  3.  * @ToolFunctions: [
  4.  *  getListFromDictionary(获取对应的值),
  5.  *  clearBlankStringFromObject(清除空字符串),
  6.  *  getValueByKey(根据key查询对应的值)
  7.  * ]
  8.  * @Function: [
  9.  *  createColumns(table列的生成),
  10.  *  createPromise(table数据的请求),
  11.  *  createHandleBarOptions(操作配置项生成),
  12.  *  createSearchBarOptions(搜索栏配置项生成)
  13.  * ]
  14.  * @Author: SQYun
  15.  * @Date: 2020-10-22 10:47:00
  16.  */
  17. import React from 'react'
  18. import { Table } from '@hz-components/react-base'
  19. import SearchContent from './../SearchContent'
  20. import MapTransfer from './../MapTransfer'
  21. import { Input, Button, message, Modal, Col, DatePicker  } from 'antd'
  22. import { fromPairs } from  'lodash'
  23. import { showWarnModalByTotalCount } from '@/utils/exportFile'
  25. import entity from './../entity'
  26. import { postSync, getTableData, exportFile } from '@/services/faceControl'
  29. const {
  30.   Ellipsis,
  31.   EnumSelect,
  32.   // RangePicker,
  33.   ValidateWrapper,
  34.   OPERATE_SPAN,
  35.   VALIDATE_TIPS_TYPE_NORMAL,
  36.   VALIDATE_TIPS_TYPE_POPOVER,
  37. } = Table;
  38. const { RangePicker } = DatePicker
  40. const { enums } = entity
  42. /**********工具函数 */
  44. /**
  45.  * @description: 获取字典中对应的值
  46.  * @param {Array} dictionary 字典字段
  47.  * @return {function} dictionary中所有item与type相等的列表
  48.  */
  49. const getListFromDictionaryByItem = (dictionary = []) => {
  51.   /**
  52.    * @param {string} item
  53.    * @return {Array} dictionary中所有item与type相等的列表
  54.    */
  55.   return function(item) {
  56.     const list = dictionary.filter((dictionaryItem) => {
  57.       return dictionaryItem.item === item
  58.     })
  59.     return list
  60.   }
  61. }
  63. /**
  64.  * @description: 清除对象中属性值为空字符串的属性
  65.  * @param {Object} obj 对象
  66.  * @return {Object} 返回的对象中属性值无空字符串
  67.  */
  68. const clearBlankStringFromObject = (obj) => {
  69.   const noBlankStringList = Object.entries(obj).filter(([key, value]) => {
  70.     if (value === '') { return false }
  71.     return true
  72.   })
  73.   const noBlankStringObj = fromPairs(noBlankStringList)
  74.   return noBlankStringObj
  75. }
  77. /**
  78.  * @description: 根据list中的key查找对应的值
  79.  * @param {Array} list 存储一系列数据的值
  80.  * @return {String} 对应的值,如没有,改为默认值 '--'
  81.  */
  82. const getValueByKey = (list) => (key) => {
  83.   return list.find((item) => {
  84.     return String(item.key) === String(key)
  85.   })?.value ?? '--'
  86. }
  88. /**
  89.  * @description: 根据state.[id]的值判断该值是否显示,不显示默认为'*'
  90.  * @param {Object} state reducer的值
  91.  * @param {any} id 该行数据的id值
  92.  * @param {any} value 该行数据实际的值
  93.  * @return {any} 结果值,如不显示则为"*"
  94.  */
  95.   function isShow (value, record) {
  96.     const result = record?.isShow ? value : '*'
  97.     return result
  98.   }
  100.   const showFunc = async (record, dispatch, ref) => {
  101.     const list = await ref.current?.getList()
  102.     const newList = list.map((val, index, arr) => {
  103.       if(val.id === record.id) {
  104.         val.isShow = !val.isShow
  105.       }
  106.       return val
  107.     })
  108.     const result = ref.current?.updateList(newList)
  109.   }
  111. /**********将会返回的逻辑函数 */
  113. /**
  114.  * table列表的生成
  115.  * @param {Object} dictionary 后台的字典值
  116.  * @param {Object} showReducer 存储该列是否显示的reducer状态
  117.  * @param {Object} showDispatch 控制该列是否显示的reducer行为方法
  118.  */
  119. const createColumns = (tableRef, dictionary, showReducer, showDispatch) => {
  120.   const getListByItem = getListFromDictionaryByItem(dictionary)
  121.   // 性别
  122.   const genderList = getListByItem('gender')
  123.   // 状态列表
  124.   const statusList = getListByItem('defence_status')
  125.   // 民族
  126.   const nationList = getListByItem('nation')
  127.   // 布控目标
  128.   const targetList = getListByItem('person_target_type')
  130.   const getGenderByKey = getValueByKey(genderList)
  131.   const getNationByKey = getValueByKey(nationList)
  132.   const getTargetByKey = getValueByKey(targetList)
  134.   return [
  135.    。。。
  136.   ];
  137. }
  139. /**
  140.  * table数据的请求
  141.  */
  142. const createPromise = async (params) => {
  143.   const paramsNoBlankString = clearBlankStringFromObject(params)
  144.   const tableData = await  getTableData({
  145.     ...paramsNoBlankString,
  146.     biz_obj: 2,
  147.   }).then((res) => {
  148.     const totalCount = res?.total ?? 0;
  149.     const currentPageResult = res?.elements.map((item) => {
  150.       return {
  151.         ...item?.biz_map,
  152.         ...item,
  153.       }
  154.     }) ?? [];
  155.     const pageIndex = res?.cur_page;
  156.     return {
  157.       totalCount,
  158.       currentPageResult,
  159.       pageIndex,
  160.     }
  161.   })
  162.   return tableData
  163. }
  165. /**
  166.  * 操作栏配置项定义
  167.  */
  168. const createHandleBarOptions = (tableRef) => {
  169.   return {
  170.     handleOptions: {
  171.       elements: [
  172.         。。。,
  173.       ]
  174.     },
  175.     /* 自定义内容检索区 */
  176.     searchOptions: {
  177.       render: () => {
  178.         return (
  179.           。。。
  180.         )
  181.       }
  182.     }
  183.   }
  184. }
  186. /**
  187.  * 搜索栏配置项定义
  188.  * @param {Array} dictionary 从后台获取的字典
  189.  */
  190. const createSearchBarOptions = (dictionary) => {
  192.   const getListByItem = getListFromDictionaryByItem(dictionary)
  193.   // 性别
  194.   const genderList = getListByItem('gender')
  195.   // 状态列表
  196.   const statusList = getListByItem('defence_status')
  197.   // 民族
  198.   const nationList = getListByItem('nation')
  199.   // 布控目标
  200.   const targetList = getListByItem('person_target_type')
  201.   return {
  202.     /* trigger 自定义查询按钮 */
  203.     // trigger: "分析",
  204.     trigger: null,
  205.     conditions: [
  206.       。。。
  207.     ]
  208.   }
  209. }
  213. export default { createColumns, createPromise, createHandleBarOptions, createSearchBarOptions, getListFromDictionaryByItem }

HooksJs代码

  1. /*
  2.  * @Name: 组件名称
  3.  * @Props: [props1(参数1), props2(参数2), ...]
  4.  * @State: [state1(状态1), state2(状态2), ...]
  5.  * @Ref: [ref1(ref对象1), ref2(ref对象2), ]
  6.  * @Effect: [effect1(), effect2()]
  7.  * @Function: [function1, function2, ...]
  8.  * @Return: [
  9.  *  state1(返回的状态1),
  10.  *  state2(返回的状态2),
  11.  *  function1(返回的方法1),
  12.  *  function2(返回的方法2),
  13.  *  ...
  14.  * ]
  15.  * @Author: SQYun
  16.  * @Date: 2020-10-22 11:22:46
  17.  */
  19. import { useState, useRef, useEffect, useReducer } from 'react'
  20. import { message } from 'antd'
  21. import { postSync } from '@/services/faceControl'
  23. function useHooks() {
  24.   // 获取字典
  25.   const [dictionary, setDictionary] = useState([])
  26.   const tableRef = useRef()
  28.   useEffect(() => {
  29.     postSync().then((res) => {
  30.       setDictionary(res)
  31.     }).catch((err) => {
  32.       message.error(err)
  33.     })
  34.   }, [])
  37.  // 更改列表文字显示状态
  38.   const initialState = {}
  39.   function reducer(state, action) {
  40.     const value = !state?.[action]
  41.     const result = {
  42.       ...state,
  43.       [action]: value,
  44.     }
  45.     return result
  46.   }
  48.   const [showReducer, showDispatch] = useReducer(reducer, initialState)
  50.   return [dictionary, tableRef, showReducer, showDispatch]
  51. }
  53. export default useHooks

优点

  • 可读性和可维护性的提高：这样拆分后组件做了什么，用到了哪些方法，已经一目了然了。这带来的可读性和可维护性的提升肯定是比之前的代码结构无法比较的。
  • 更易于提取复用的逻辑代码：当你发现该页面组件所使用的的hooks或方法在另外一个页面也可以用到时，你就可以直接将这些方法提取出来。

    当Hooks与Hanler文件逐渐繁琐时

    当hooks与handle文件逐渐繁琐时，我们其实还可以更进一步的拆分我们的hooks.js与handle.js。拆分目录示例如下
    1. |— container
    2.   |— entity // 存储常量
    3.   |— hooks // 各种自定义的 hooks
    4.     |— useHooks1.js // hooks示例1
    5.     |— useHooks2.js // hooks示例1
    6.     |— index.js // hooks的主要出口
    7.   |— handler // 转换函数，以及不需要 hooks 的事件处理函数
    8.     |— handler1.js
    9.     |— handler2.js
    10.     |— index.js // handle的主要出口
    11.   |— component //组件
    12.     |— index.js
    13.     |— index.less
    14.   |— index.js // 主文件，只保留实现步骤
    15.   |— index.css // css 文件

    组件所用的方法被公用时

    原则上只被一个组件使用到的hooks或handle方法是不用提取到公共文件夹下的。只有当hooks或handle方法被两个及以上组件共用时。才将其提取到公共文件夹下，也就是我们在src文件夹下的hooks文件夹与utils文件夹

    如何让开发者一眼就能看懂页面的注释案例

    主文件的拆分主要是为了提高代码的可读性和可维护性。那么为了让代码可读性和可维护性得到提高，注释也是必不可少的。因此我们该如何去写组件级别的注释呢？
    如何让开发者一眼就能看懂页面的注释案例

备注：

  • 在编写handle函数时，尽量编写纯函数： 一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用
  • 在提取公用组件或公用方法时，请尽量采用DRY(Don’t Repeat Yourserl)原则与让代码更容易易读的原则。