之前有发过两篇帖子，分别单独讲述了分页和状态重置，这次对两者进行结合进行实战教学。

项目代码：github.com/onlyheartt9…

一定要下载下来自己运行，方便理解

分为了9个模块，面向了大部分的业务情况。中间的内容是参数总和。

实战中经常会出现这样的情况，页面上展示内容，以及涉及参数的交互功能放在不同的模块中。（假设中间的为内容展示区域，其他为设置参数的交互地方）

这种情况基本上都会使用状态管理去处理(例如react-redux,reto。我这里使用的reto)

主要核心是对模块的代码进行展示，useStore(XXXStore)返回的是我使用 useList返回的值，params是当前整个的参数存储的地方，展开结构就是最上面实战界面中间的内容。每个模块主要就是根据params的值进行渲染，而修改params的方法就是getList方法，getList方法会在修改params的同时，将新的params放入接口中调用，从而获取新的list值。

这里模块中，每个模块的修改参数的方法，基本上只修改当前属于这个模块的参数，G模块修改G参数类似这种，使业务模块更小，更专一，更好维护。

当然也会出现G模块里面去修改H模块的值。代码中也有展示，想要修改其他模块的值，也是修改对应的属性，实现的原理也是我们保证规范，使用params的内容进行渲染才可以做到。

上述主要是对useList的具体使用，那么重置的相关内容在哪里？

细心的同学可能发现了区域J，这里就是核心使用。

参数过多的情况下，会出现重置参数的业务需求。所以需要对useList进行更加业务化的修改

useResetState出场了，对几个关键性的值提供了reset方法，

我不会在代码中重复的记录初始值，也不会关心初始值是什么样的，而是利用闭包的优势，将值存储起来。

直接调用封装好的reset方法，即可直接将值还原（将params数据还原为初始参数值）。

而且页面的渲染是基于params的，所以也会带动界面恢复为初始状态。逻辑形成闭环。

到此业务结束。

作为一个程序猿，不会偷懒是不行的。当你不会总结经验，那么你就会陷入无限的重复工作量的过程中。

上述的业务如果只出现一次，那么其实怎么写都可以，无论用任何方法，时间上是没有区别的。

但是重复出现相同业务，我只需要重写参数模块，业务逻辑基本上全部可以复用，会省下来非常非常多的时间，正常这样的业务，完整写下来，需要一天的时间，

我因为有我自己封装的hooks，基本上2个小时就完事了（大部分情况啊，遇见特殊的情况还是需要重新写的）。

那么省下来的时间，就可以正大光明的划水了，看视频不香么（看的绝对是技术视频），看书不香么（我这么帅的人，肯定是在看源码），等等等等

最后

每天进步亿点点，升职加薪迎娶白富美不是梦！！！祝愿我美梦成真。。。