github
安装使用github上说的很清楚，这里就不赘述了，重点说一说遇到的坑。
首先，要给InfiniteScroll所在的div设置overflow:"auto"的属性，表示如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，height设置为屏幕高度的，这样每页的数据都会展示出来，超出屏幕的部分会隐藏，但是可以向上滑动以显示出来。

render() {
        const div_style = {
            height: "100vh",
            overflow: "auto"
        }
        return ( 
            <>
                <HeaderTip data={this.state.message}/>
                <div style={div_style}> 
                    <InfiniteScroll
                        pageStart={0}
                        loadMore={this.loadMore.bind(this)}
                        hasMore={this.state.hasMoreItems}
                        loader={<div className="loader" key={0}><p align="middle">Loading ...</p></div>}
                        useWindow={false}>
                        <CapitalList data={this.state.data}/>   
                    </InfiniteScroll>
                </div>
            </>
        );
    }

如下是CapitalList中的每一项item，这里有个大坑，因为我在key里增加了一个随机数，导致每次重绘时都会重绘整个页面，所以导致了如果快速上滑会一直自动刷新的问题。
这个key是和react的dom-diff算法相关的。react对dom做遍历的时候，会根据data-reactid生成虚拟dom树。如果你没有手动的添加unique constant key的话，react是无法记录你的dom操作的。它只会在重新渲染的时候，继续使用相应dom数组的序数号(就是array[index]这种)来比对dom树。

return (
            data.map(item => {
                return (
                    <React.Fragment key={item.order+item.desc+Math.random()}>
                        <CapitalItem data={item}></CapitalItem>
                    </React.Fragment>
                )
            })
        )

改成如下就可以了

return (
            data.map(item => {
                return (
                    <React.Fragment key={item.order+item.desc}>
                        <CapitalItem data={item}></CapitalItem>
                    </React.Fragment>
                )
            })
        )