1. 首页

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

前言

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

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

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

封装api层

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

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

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

类组件中编写请求方法

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

类组件中编写分页方法从写一个分页表格来讲讲react hook怎么玩

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

使用hook重写这个分页表格

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

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

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

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

使用useState定义分页和总条数的state从写一个分页表格来讲讲react hook怎么玩

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

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

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

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

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

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

OK基本逻辑编写完成 最后


return { page, load, changePage, tableData, total };

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

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

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

作者:忆情
链接:https://juejin.im/post/5d4431c351882510e12670d2

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

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

链接:https://www.javascriptc.com/3837.html

« Js中文网周刊第67期
使用React Hook实现Redux状态机»
Flutter 中文教程资源

相关推荐

QR code