基于react-hooks+Typescript二次封装Antd-Table

公司项目中有很多table页面，而且很多业务都很类似，CURD操作是不可避免的，这部分的操作逻辑很繁琐，页面维护造成极大的不方便，因此便想到使用hooks对table进行封装一波，抽离这些重复的逻辑。

组件状态设计(props+state)

通常表格需要一份params搜索数据,params数据会根据不同的业务逻辑而不同，因此我们作为prop传入组件内部, 除此而外我们还需表格的列数据owncolumns，与antd-table组件原始支持的baseProps。在数据层面我们需要在组件内部维护远程数据源datasource，根据不同的业务传入不同的查询方法queryAction，除此而外，我们还需要一个loading状态，在请求数据的时候去显示loading动画，这个小东西对用户体验的影响很大。最后，我们的组件的props与state就很清晰明了了

const { owncolumns, queryAction, params, baseProps } = props

const paginationInitial: paginationInitialType = {
    current: 1,
    pageSize: 10,
    total: 0,
}

最后我们合并这些state

const initialState: initialStateType = {
    loading: false,
    pagination: paginationInitial,
    dataSource: []
}

逻辑设计

页面中需要维护的state都需要对应的操作去修改它，我们之所以不用useState是因为，useState对不同操作的细粒度不是很高，虽然可以合并state,但是对于不同的操作，我们需要更清晰的知道我们的代码做了什么，比如说触发一个action，使用redux的思想，因此我们自然而然想到了useState的代替方案-------useReducer。

const reducer = (state: initialStateType, action: actionType) => {
        const { payload } = action
        switch (action.type) {
            case 'TOGGLE_LOADING':  //更改loading状态
                return { ...state, loading: !state.loading }
            case 'SET_PAGINATION':  //设置分页数据
                return { ...state, pagination: payload.pagination }
            case 'SET_DATA_SOURCE': //设置远程数据源
                return { ...state, dataSource: payload.dataSource }
            default:
                return state
        }
    }
const [state, dispatch] = useReducer(reducer, initialState)

此时我们直接调用dispatch传入同的action就可以进入reducer进行处理，并且返回我们想要的新的state

对接口的封装

页面中数据需要通过传入的queryAction进行查询，同时通过dispatch不同的action去处理组件的状态

async function fetchData() {
        dispatch({
            type: 'TOGGLE_LOADING'
        })
        // 分页字段名称转换
        const { current: indexfrom, pageSize: counts } = state.pagination
        let res = await queryAction({ indexfrom, counts, ...params }).catch(err => {
            dispatch({ type: 'TOGGLE_LOADING' })
            return {}
        })
        // 关闭loading
        dispatch({
            type: 'TOGGLE_LOADING'
        })
        if (res.result === 200) {
            const { totalcounts, list } = res
            // 这边根据不同的后端接口去做处理
            dispatch({
                type: 'SET_PAGINATION',
                payload: {
                    pagination: { ...state.pagination, total: totalcounts }
                }
            })
            // 回填list数据
            dispatch({
                type: 'SET_DATA_SOURCE',
                payload: {
                    dataSource: list
                }
            })
        }
    }

接着我们肯定会想到使用useEffect去为组件添加副作用，在组件mount，update时候去拉取数据，但是因为们的函数被定义在组件内部，组件每次更新都会重新生成该方法，对于useEffect来说，他的依赖项每次组件update都会重新定义，依赖变化了，进而又会执行方法->组件更新->进而又会执行方法......,因此会造成死循环。有两种办法可以解决这个问题。

将函数提取到组件外部,同时将dispatch函数作为参数传入
使用useCallback函数优化，将方法进行缓存，只有当callback的依赖发生变化了才会再次执行fetchData方法。

第一种在这里不多说了，这里我们采用第二种方式进行优化。

const fetchDataWarp = useCallback(
    fetchData,
    [params, state.pagination.current, owncolumns, queryAction],
)
 useEffect(() => {
    fetchDataWarp()
}, [fetchDataWarp])

组件事件处理

目前我们仅封装了分页的功能，因此只需要维护页面改变事件就可以

// 改变页码
function handleTableChange(payload: any) {
if (payload) {
    const { current } = payload
    dispatch({
        type: 'SET_PAGINATION',
            payload: {
            pagination: {
                ...state.pagination,
                current
            }
        }
    })
}
}

render

 <Table
    columns={owncolumns(fetchData)}
    pagination={state.pagination}
    dataSource={state.dataSource}
    loading={state.loading}
    onChange={handleTableChange}
    {...baseProps}
/>

TS类型

import { Columns } from '../../types/types'
import { TableProps } from 'antd/lib/table/interface'
interface queryActionType {
    (arg: any): Promise<any>
}
interface ColumnFunc {
    (updateMethod: queryActionType): Array<Columns>
}
export interface ArgTableProps {
    baseProps?: TableProps<any>
    owncolumns: ColumnFunc
    queryAction: queryActionType
    params: any
    listName?: string
}
export interface paginationInitialType {
    current: number
    pageSize: number
    total: number
}
export interface initialStateType {
    loading: boolean
    pagination: paginationInitialType
    dataSource: Array<any>
}
export interface actionType {
    type: string
    payload?: any
}

组件完整代码

import React, { useEffect, useReducer, useCallback } from 'react'
import { Table } from 'antd';

import { ArgTableProps, paginationInitialType, initialStateType, actionType } from './type'

const useAsyncTable: React.FC<ArgTableProps> = props => {
    const { owncolumns, queryAction, params, baseProps } = props
    // 分页数据
    const paginationInitial: paginationInitialType = {
        current: 1,
        pageSize: 10,
        total: 0,
    }
    // table组件全量数据
    const initialState: initialStateType = {
        loading: false,
        pagination: paginationInitial,
        dataSource: []
    }
    const reducer = (state: initialStateType, action: actionType) => {
        const { payload } = action
        switch (action.type) {
            case 'TOGGLE_LOADING':
                return { ...state, loading: !state.loading }
            case 'SET_PAGINATION':
                return { ...state, pagination: payload.pagination }
            case 'SET_DATA_SOURCE':
                return { ...state, dataSource: payload.dataSource }
            default:
                return state
        }
    }
    const [state, dispatch] = useReducer(reducer, initialState)

    // 改变页码
    function handleTableChange(payload: any) {
        if (payload) {
            const { current } = payload
            dispatch({
                type: 'SET_PAGINATION',
                payload: {
                    pagination: {
                        ...state.pagination,
                        current
                    }
                }
            })
        }
    }
    // useCallback包装请求，缓存依赖，优化组件性能
    const fetchDataWarp = useCallback(
        fetchData,
        [params, state.pagination.current, owncolumns, queryAction],
    )
    async function fetchData() {
        dispatch({
            type: 'TOGGLE_LOADING'
        })
        // 分页字段名称转换
        const { current: indexfrom, pageSize: counts } = state.pagination
        let res = await queryAction({ indexfrom, counts, ...params }).catch(err => {
            dispatch({ type: 'TOGGLE_LOADING' })
            return {}
        })
        // 关闭loading
        dispatch({
            type: 'TOGGLE_LOADING'
        })
        if (res.result === 200) {
            const { totalcounts, list } = res
            dispatch({
                type: 'SET_PAGINATION',
                payload: {
                    pagination: { ...state.pagination, total: totalcounts }
                }
            })
            // 回填list数据
            dispatch({
                type: 'SET_DATA_SOURCE',
                payload: {
                    dataSource: list
                }
            })
        }
    }
    useEffect(() => {
        fetchDataWarp()
    }, [fetchDataWarp])
    return (
        <Table
            columns={owncolumns(fetchData)}
            pagination={state.pagination}
            dataSource={state.dataSource}
            loading={state.loading}
            onChange={handleTableChange}
            {...baseProps}
        />
    )
}
export default useAsyncTable

README.md

Prop

属性	类型	默认值	备注
owncolumns	(updatefunc:Function) : columns	必选参数	updatefunc用于刷新列表
queryAction	(payload):Promise	必选参数	用于列表数据获取
baseProps	TableProps from antd	任选	antd的基础props
params	object	{}	请求附加参数

使用例子

 const getColumn: getColumnType = updateMethod => {
    return [
      {
        title: "项目名称",
        dataIndex: "project_name",
        key: "project_name",
      },
      {
        title: '操作',
        key: 'setting',
        width: 200,
        render: (text: any, record: any, index: number) => {
          return (
            <div>
              <Button type="primary" style={{ marginRight: '5px' }}>查看</Button>
              <Popconfirm
                title="此操作将永久删除该项目, 是否继续?"
                okText="确定"
                cancelText="取消"
                onConfirm={() => {
                  updateMethod()
                }}
              >
                <Button type="danger">删除</Button>
              </Popconfirm>
            </div>
          )
        }
      }
    ];
  }
  render(){
      return (
          <ArgTable
                owncolumns={updatefunc => getColumn(updatefunc)}
                queryAction={API.http_getProjectList}
                baseProps={{ rowKey: record => record.project_id }}
                params={searchData} 
            />
      )
  }