[技术分享]React 实现底部加载列表数据

shangjin发布于3 个月前 • 112 次阅读

react轮子说实话真的不难,只要控制好prop和state,其余的看你如何想的。如果不懂react基础知识的请出门左转,谢谢!我们先来说思想,造轮子必须清楚哪些可以外面传进来,哪些是必须内部控制的!外面传进来的我们直接用props就好了,内部控制的我们用state就好了,结合本期的课题,我们内部控制的最多是样式,因为暂时没有其他需要,需要外部传入的有数据源,我们又参考了市面上其他的组件,觉得列表页每一项最好能有个click事件,于是我们的props还需要一个事件,这样基本上思路清晰了,上代码!

image

看上图,dataSource代表数据源,请求的逻辑都在外面,轮子只负责渲染,onSelect代表轮子列表渲染事件,也就是我们下面绑定到click上的事件,renderItem代表轮子渲染的回调,用户可以在外面认为的指定渲染的内容外部渲染轮子内容,style代表外面传入的样式控制,有一点注意,当存在renderItem的时候,onSelect是不生效的,因为用户完全可以在外面绑定事件,而不需要通过onSelect。

接下来我们实现底部加载就好了,现在又2个方法实现,外部实现和内部实现,区别在于,外部实现可以把数据逻辑彻底放在外面,轮子只负责接受,内部渲染需要做些额外的事,和外部通讯,来改变状态。

image

我们从外面传入了listLoading来控制底部加载,节省开销,同时传入这个fetchList来获得新的数据,关键在于我们在componentDidMount个ul列表绑定了srcoll事件,来监听底部的位置,当我们的滚轮离底部还有20px的时候,会请求数据,同时修改传入的listLoading状态,当请求完成,再度修改listLoading状态,同时传入更新后的dataSource,我们的列表就更新了,到这里其实差不多了,但是我们总觉得是不是少了啥,没错少了,提示用户转转转的遮罩层,我们希望当listLoading为true时,出现遮罩层,为false时遮罩层消失,于是我们继续修改。

image

我们可以看到,{listLoading && <div className={modal}>加载中…</div>}增加了这句,当我们listLoading 为true,显示遮罩,样式随意哈哈哈,为false时,遮罩消失,这样我们的轮子就完成了!

共收到 0 条回复