场景
对于大多数企业内部后台管理应用来说。其需求都非常简单。目前工作中接触到的大部分都是增删改查，最多再加个排序。如果信息复杂，后端一般会单独拆出一个详情接口，需要编辑之前异步请求拿到。
但是显示方式却不尽相同，使用卡片，表格，列表等ui进行展示。
在开发的过程中ui部分使用了ant design，但是逻辑部分基本都手写完成。
一般开发的时候通常复制粘贴老的页面，再进行修改。
这种方式好在非常灵活，之前大部分的需求也是这样实现的。
不过问题也很明显。一方面重复代码多，几乎每个页面逻辑都是一样的，复制粘贴显然不利于复用。
另一方面是bug率高，每个增删改查页都是一个新的逻辑，修改的部分可能会引入新的bug。
需求
组件是 UI + 逻辑，UI使用了统一的库能尽可能复用，但在老的复制粘贴的开发过程中，逻辑复用能力等于 0。
比如ant design的很多ui组件都内置了默认的逻辑，这部分逻辑和ui强耦合在一起。比如其中的 Cascader级联选择器。
只需要传入一个树形结构，然后使用onChange的参数接受用户选择的值就可以了。之前项目中很多组件也是按这样抽出封装的。
如果这个组件的ui无法满足我们需求，甚至要从0开始设计一套新的ui却想要复用他的逻辑该怎么办呢，我们只能放弃这些本可以复用的逻辑重新开发一套。
那么有没有什么办法能作到单纯的逻辑复用，提高开发crud项目的效率呢。
解决方案A
React hooks距今发布已经有两年的时间，React hooks的推广中几乎都提到了一个概念，“比原先更细粒度的逻辑组织与复用”，在官方的范例也示范了可以解决我的需求的demo。
一般来说这种后台系统开发中遇到的问题，一定在其他同等或者更复杂的项目中遇到过了，所以在自己造轮子之前，先找找有什么社区的解决方案。
经过查找，还有相关团队的知乎推广，我决定尝试一下 @umijs/hooks 这个React hooks库。
umiHooks声称在理想情况下后台开发“不需要写一行逻辑”，其中useAntdTable 这个api能直接解决我遇到的问题。
useAntdTable封装了
- 分页管理
- pageSize管理
- 分页变化，pageSize 变化时重新进行异步请求
- 筛选条件变化时，重置分页，并重新请求数据
- 异步请求的 loading 处理
- 异步请求的竞态处理
- 组件卸载时丢弃进行中的异步请求
使用方法
import { useAntdTable } from '@umijs/hooks'
const { tableProps, search } = useAntdTable((params) => services.getUsabilityList(params).then(res => {
console.log(params)
return { data: res.list,total:res.count }
}), { defaultPageSize: 10, form: props.form })
console.log(tableProps)
console.log(search)
const { submit } = search || {}
const { getFieldDecorator, getFieldValue } = props.form
<Table
{...tableProps}
rowKey="id"
columns={columns} />
useAntdTable接受一个异步函数，接受搜索的条件返回一个promise，第二个参数接受默认每页显示多少行和antd3.x表单的props.form对象，返回tableProps和search
结构：
tableProps:{
"dataSource":any[],
"loading":boolean,
"onchange":Function
"pagination":{
"current":number,
"pageSize":number,
"total":number,
"showQuickJumper":boolean,
"showSizeChanger":boolean
}
}
submit:{
"type":"simple"|"advance",
"changeType": Function,
"reset": Function,
"submit": Function,
}
其中tableProps直接解构到Table组件中
search下有submit和reset等函数,可以提交，重置搜索表单。
useAntdTable确实简单的实现了“增删改查”中“查”的行为。
实际应用中确实提高了开发效率。
但在使用过程中遇到了更麻烦的问题
问题
我所使用的版本是@umijs/hooks的1.5.1版本。
稳定性
我最开始尝试的时候是umi/hooks的测试版。
很快发现官网的更新声称要在正式版里废弃掉这个api。
再后来我发现官网无法进入，无法查阅文档。
几个月后它变成了alibaba/hooks
同时又不废弃useAntdTable这个api了。
不合理的接口设计
首先一个整合列表渲染逻辑的hook，必须传入props.form和antd3.x版本的表单绑定就有种捆绑销售的意味，同时不兼容自家4.x的form，而且无法从表单之外获取参数，没办法只能通过ref在返回promise的请求函数中加入表带之外的参数，其实如何提供搜索参数封装可以不关注。
在返回的submit对象中，有type simple和advice还有一个转换函数。本意是想在复杂搜索和简单搜索中切换。但大部分的后台都没有这个需求，搜索条件的控制是越复杂搜索精度越高的。
在传入的异步函数中能接受到的搜索参数params中添加了filter和sorter两个对象。对应的是单页中的排序和过滤，在后台分页的情况下这两个参数提供的功能都可以整合到筛选中去。
bug
在尝试对平台升级antd4.x之后发现所有在搜索条件表单中的Input.Search都接收不到值，只能用props.form给的接口函数在传入的异步方程里重新获得值。
无法完整实现需求
useAntdTable只是完全控制了列表的搜索。
但是通常的后台开发包括增删改查，只完成了四分之一的需求。
我的解决方案
react hooks的库目前还不算成熟，如果贸然使用应该还会遇到umi/hooks这样的事情。
所以稳妥的解决方案应该是，贴合业务需求自己造个轮子。
基础封装
基础封装部分借鉴了ecomfe的封装
请求的loading状态
首先封装一个通用函数 useMethods，他接受一个数据格式，和操作这个数据的各种方法，返回一个useXxx的hooks。
const useMethods = (initialState, methods) => {
const [value, dispatch] = useReducer(
(state, action) => {
const { type, payload } = action
const fn = methods[type]
return fn(state, payload)
},
initialState
)
const bindMethods = useMemo(
() => {
let mapedmethods = {}
Object.getOwnPropertyNames(methods).forEach((key) => {
mapedmethods[key] = (...args) => dispatch({ type: key, payload: args })
})
return mapedmethods
},
[methods]
)
return [value, bindMethods]
}
这样就能封装useTaskPending函数，方便的给每个请求函数都加上loading，success，failed状态了。
首先是useQueryMapState，
export const STATE_MAP = {
init:'init',
loading: "loading",
loaded: 'loaded',
failed: 'failed'
}
const useStateMapState = () => {
const initialValue = STATE_MAP.init
const stateMethods = {
startLoading(){
return STATE_MAP.loading
},
success() {
return STATE_MAP.loaded
},
failed() {
return STATE_MAP.failed
}
}
return useMethods(initialValue, stateMethods)
}
等价于
const [state, dispath] = useReducer((state, action) => {
const methods = {
loaded: () => STATE_MAP.loaded,
failed: () => STATE_MAP.failed,
loading: () => STATE_MAP.loading
}
return methods[action]()
}, STATE_MAP.init);
const success = () => dispath(STATE_MAP.loaded)
const failed = () => dispath(STATE_MAP.failed)
const startLoading = () => dispath(STATE_MAP.loading)
然后就得到了可以给异步函数添加请求状态的hook
export const useTaskPending = task => {
const [state, { success, failed,startLoading }] = useStateMapState()
const taskWithPending = useCallback(
async (...args) => {
startLoading()
try {
const result = await task(...args)
success()
return result
} catch (error) {
failed()
return error
}
},
[task, success, failed,startLoading]
)
return [taskWithPending, state]
}
之后就可以封装useAntdTable了，首先增删改查对应的请求一般是4个，
- 增改，后台一般通过id判断是新增还是修改。
- 删除
- 查询，传入一些搜索条件
- 详情查询，有些复杂的数据接口不会在查询接口中全部返回数据，需要额外用id去查
接口设计传入了4个函数和一个对象，queryParams是queryHandle的参数。因为要处理分页，在切换页面时自动去请求对应页码符合搜索条件的数据，其中detailhandle是可选的
export const useAntdList = (p) => {
const {
queryHandle,
queryParams:outerParams,
deleteHandle,
saveHandle,
detailHandle,
pageSize
}=p
}
接着声明一些组件状态，把请求函数用hooks包起来拿到状态。改变搜索条件页码要跳到第一页pageNum和其他参数需要分开管理
paramStr是搜索参数字符串化的结果，来deepEqual比较，搜索的时候参数不变就不请求。
extra为了从获取列表接口中拿到list和total之外的参数
const [users, { replace }] = useArray([])
const [total,setTotal]=useState(0)
const [paramStr,setParamStr]=useState('')
const [pageNum,setPageNum]=useState(1)
const [editData, setEditData] = useState({})
const [extra,setExtra]=useState({})
const _queryParam=useRef({})
_queryParam.current=outerParams
const [wrapedQueryHandle, queryHandleloading] = useTaskPending(queryHandle)
const [deleteWrap,deleteLoading]=useTaskPending(deleteHandle)
const [saveWrap,saveLoading]=useTaskPending(saveHandle)
核心函数，只在内部调用，获取list数据并保存
const _fetchUserWrap=useCallback(async(param,newnum)=>{//内部函数
const res= await wrapedQueryHandle({..._queryParam.current ,
...param,pageNum:newnum||pageNum})
replace(res.list)
setTotal(res.total)
typeof res.extra==='object'&&setExtra(res.extra)
},[pageNum, replace, wrapedQueryHandle])
删除，保存，tableChange目前没用到，pageNumChange（能不能优化一下）
保存的beforeClose传入一个Promise，在保存成功关闭modal之前做一些清理工作。
const removeItem = useCallback(
async user => {
const deleteRes=await deleteWrap(user)
if(deleteRes.success){
message.success(deleteRes.message)
await _fetchUserWrap()
}else{
message.error(deleteRes.message)
}
},
[deleteWrap,_fetchUserWrap]
);
const tableOnChange= useCallback((_what)=>{
// console.log(what)
},[])
const pageNumChange= useCallback((num)=>{
setPageNum(num)
_fetchUserWrap(undefined,num)
},[setPageNum,_fetchUserWrap])
const saveFn=useCallback(async(values,beforeClose)=>{
let _values=values
const {id,...rest}=values
if(id===CREATE_LABEL){
_values=rest
}
const saveRes=await saveWrap(_values)
const allowClose= beforeClose?await beforeClose(saveRes): await new Promise(res=>res(true))
if(saveRes.success){
message.success(saveRes.message)
}else{
message.error(saveRes.message)
}
if(allowClose){
setEditData({})
_fetchUserWrap()//获取本页数据
}
},[_fetchUserWrap,saveWrap])
搜索函数,didmount和搜索时调用，参数不变直接返回，通过字符串deepEqual比较
const getList=useCallback((param={})=>{//获取当前搜索条件的第一页的数据
const commingStr=JSON.stringify({..._queryParam.current,...param})
if(paramStr===commingStr){
return
// console.warn("参数未改变")
}
setParamStr(commingStr)
setPageNum(1)
_fetchUserWrap(param,1)
},[paramStr, setParamStr, setPageNum, _fetchUserWrap])
新建按钮，modal的取消按钮，还有异步的编辑（同步的编辑直接用setEditData)
const openModalWithCreate=useCallback(()=>{
setEditData({id:CREATE_LABEL})
},[])
const closeModalOnly=useCallback(()=>{
setEditData({})
},[])
const setAsyncEditData=useCallback(async(item)=>{
const res=await detailHandle(item)
setEditData(res)
},[detailHandle])
然后是一些静态设置
export const CREATE_LABEL='新建'
const commonAntdModalProps={
destroyOnClose:true,
okText:'确定',
cancelText:'取消',
}
最后全部打包成一个对象导出,tableProps解构赋值给antd的table组件，
editPropsInList在table所在的组件中使用，editProps赋值给edit组件
modalProps给编辑的modal
return {
getList:getList,
removeFn:removeItem,
removeLoading:deleteLoading===STATE_MAP.loading,
tableProps:{
dataSource:users,
loading:queryHandleloading===STATE_MAP.loading,
onChange:tableOnChange,
pagination:{
current: pageNum,
pageSize: pageSize||20,
total: total,
onChange: pageNumChange
},
},
editPropsInList:{
openModalWithCreate:openModalWithCreate,
setEditData:setEditData,
setAsyncEditData:setAsyncEditData
},
editProps:{
isCreate:editData.id===CREATE_LABEL,
editData:editData,
saveFn:saveFn,
modalProps:{...commonAntdModalProps,
visible:!!editData.id,
onCancel:closeModalOnly,
title:`${editData.id === CREATE_LABEL ? '新建' : '编辑'}`,
confirmLoading:saveLoading===STATE_MAP.loading
}
}
extra:extra,
}
使用例
const { extra, getList, removeFn, tableProps, editPropsInList, editProps } = useAntdList({
queryHandle: services.getWhiteList,
queryParams: queryParams,
deleteHandle: deleteFn,
saveHandle: services.saveWhiteList,
})
useEffect(() => {
getList()
}, [queryParams])
这里的 useEffect并没有依赖getList，在eslint里会报错，其实不影响使用
因为queryParams的变化会让getList也变化。
写成
useEffect(() => {
getList()
}, [getList])
就不会报错可是语义上会有点问题，不知道有没有什么好的做法
| variable | type | info |
|---|---|---|
| getWhiteList | (queryParams)=>{list,total,extra} | - |
| ---- | ---- | ---- |
| extra | object | getWhiteList的返回值 |
| getList | async Function | 搜索条件变更时调用 |
| removeFn | async Function | onConfirm={() => removeFn(item)} |
| tableProps | Object | <Table {...tableProps} rowKey="id" columns={columns} /> |
| editPropsInList | Object | 新建，编辑，异步获取详情再编辑 |
| editProps | Object | <Edit {...editProps} /> |
总结
重写的useAntdTable封装了后台应用常用的增删改查。比较完整的完成了希望达到的效果。但扩展性和代码风格，性能等还有很多可以优化的地方。
