react 造个列表轮子，实现底部加载

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

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

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

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

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