ahooks • useTable – 查询表格场景插件化 Hook 解决方案

資深大佬 : monkindey 10

官网 https://usetable-ahooks.js.org/
Github https://github.com/ahooksjs/useTable/

为什么要有 useTable ？

在中后台场景中，查询表格的场景占比较高。你会发现该场景写起代码会充斥着重复性的代码，比如点击下一页的时候，你需要把表单查询条件带过去，点击查询的时候你需要把页码归为 1 等常规逻辑。当然还有很多增强功能，比如排序、filter 、多选功能。

我们面临“高效”和“灵活”权衡问题，高效的话可以一个组件来实现上面功能然后通过 props 来配置，这样子可能会减少了灵活性，灵活又可能需要使用方手写很多代码才能完成一个功能，失去了高效性。

最后借鉴了 Egg 和 Babel 的思想，通过 Core + Plugin 的方式来平衡“高效”和“灵活”。同时设计的过程中，我们减少新概念出现，尽量使用业界通用的方案来减少学习成本。我们花费大量时间去思考插件设计，并且数字供应链已经做第一个吃螃蟹的人，基本上所有的查询表格场景都用这个方案了。现在是时间放出来让大家 Review 下了，期望有更多场景的输入，这样子 useTable 才能做得更好。

useTable 是什么？

useTable 针对的是查询表格场景的一些状态逻辑处理，比如请求的时候有 loading，请求成功之后设置 dataSource，点击下一页的时候请求等。本身不关心 View 层，并不是重新造一个 Table 组件。

它包含以下特性：

大佬有話說 (5)

資深大佬 : otakustay

我认为在 hook 上这么玩 plugin 的方案非常扯谈，hook 本来就是一套函数式的设计，基于原子的数据来增强就好
const tableProps = useTable(list);
const propsWithSelection = useSelection(tableProps);
const propsWithSort = useSort(propsWithSelection);

这样甚至可以很快速地构建出适合自己的 hook：
const useOwnTable = compose(useTable, useSelection, useSort);

任何一个东西，加上插件就是在增加概念，插件不是一个公认的逻辑，每一个插件系统的实现和设计都是不一样的，让人去理解成本并不低

主資深大佬 : monkindey

@otakustay plugin 其实就是一个 hook，只是一个高级 hook，返回对应的属性而已。而且多选、排序都是依赖查询流程的，如果你只是关心 props 的话，没办法一下就完成一个功能，比如多选勾选的时候，重新点击查询会清空掉勾选的值，排序也是一样的情况。

其实 useTable 是具备插件合并的能力，每一个插件也是一个 hook，你可以理解 useTable 就是一个 compose，useTable 、useSelction 、useSort 是一个插件。也就是你的理解：

const useOwnTable = compose(useTable, useSelection, useSort);

相当于

const useOwnTable = useTable(useSelection, useSort)

主資深大佬 : monkindey

@otakustay 插件你可以理解是增加一个概念，但是里面用的东西都不是新概念，都是一些业界流行的概念合并在一起。因为我们要写一个地方就可以解决一个功能的，不需要我加一个多选的功能或者排序的功能都要用 useState 状态管理，然后设置 props，然后在请求的链路中还要去清除勾选项，你会发现代码写起来就很繁琐，特别是当你负责很多类似页面的时候。

資深大佬 : otakustay

> 而且多选、排序都是依赖查询流程的，如果你只是关心 props 的话，没办法一下就完成一个功能

我会选择先弄一个 useTableParams 的东西来组装参数，useTableXxxParams 追加参数

算是设计理念上的不同吧，我比较喜欢“如无必要，勿增概念”的玩法

主資深大佬 : monkindey

@otakustay 额额，同意你的设计理念，我也喜欢简单。我也思考很久，说服很多人，整一个设计并没有加概念，插件其实一个 hook，里面有 middleware 还有 compose 都是业界通用方案，只是在这里把它们合在一起。

组装参数只是一部分，还有在查询前做事情，在查询后做事情，比如我们这边有人实现一个服务端驱动的插件，还可以拦截 response 做格式化。

因为我不知道你们有没有做过中台页面，可能代入感比较弱。你提的问题我们这边在对这个方案的时候也提出来过，但是最后都认同了。如果你想进一步交流的话，可以加我微信 atob(‘bW9ua2luZGV5’) ( console 执行下 )