从写一个分页表格来讲讲react hook怎么玩

前言

  React hook已经出来已经很长时间，之前一直没有去了解，最近花时间看一下，还是颇有感触，使用React开发也已经有挺长时间，在开发过程中，对组件的拆分，自认做得还是比较细致，小到一个标题都会拆分成一个组件，但是对于一些组件相同逻辑的处理，一直做得不太到位，于是乎总是会在类似的组件里写很多重复的代码，所以在看hookAPI的时候也是带着对以往的思考与审视，希望能从中找到好的解决方式。

    基础的API就不说了，学习一个知识最好的方式就是先仔细的阅读官方文档，所以我就直接进入正文吧。

使用Class 类组件编写一个分页表格

封装api层

类组件声明state（一般来说还会有一个params参数 表示表格查询的参数这里截图省略了）

类组件中编写请求方法

类组件中编写分页方法

在开发业务系统中，每加一个页面，总是在重复的写这些代码，这几个方法不停的复制然后粘贴，这个大概就是所谓的copy工程师了吧。

使用hook重写这个分页表格

先思考分页表格大致需要哪些状态

1. 分页的参数 当前页和一页显示的条数
2. 数据的总条数
3. 返回的表格数据data
4. 数据加载中状态 load

定义一个自定义hook 在这个自义定hook中完成所有逻辑

使用useState定义分页和总条数的state

使用useCallback函数返回缓存的分页处理函数

useCallback会在函数组件第一次渲染的时候执行，之后的执行会在其依赖的变量发生改变时再次执行，这里我不需要重复执行 ，所以传个[];

 使用处理副用的hook编写发送请求逻辑

useEffect 是专门用来做副作用的，默认会在函数组件第一次渲染的时候执行，而之后的执行也是会在其依赖的变量发生改变时再次执行，表格数据改变一般是在分页条变化或者搜索参数变化时需要重新请求，所以依赖数组里需要加上[page,parms]

OK基本逻辑编写完成 最后

return { page, load, changePage, tableData, total };
复制代码

最后使用 编写好的自义定hook 在组件中传入 API的方法

这样在我们的组件中只需要引用我们自定义的hook即可。

转载于:https://juejin.im/post/5d4431c351882510e12670d2