Question

我正在重构一个ReactJS应用程序，该应用程序为用户提供了大量内容（超过1k条记录），还允许他们对所述内容（范围，切换，排除等）应用复杂的过滤器

由于要渲染大量的数据，例如在用户的计算机上非常费时（特别是在IE11或Edge中），我决定只渲染100个部分的数据块，提高了性能（绘制图片时，响应时间从几秒钟减少到了几毫秒）

但是，这样做会带来一个新问题，因为需要对内容进行分页，所以唯一添加/删除内容记录的方法是用户向上或向下滚动。

不幸的是，渲染的块仅允许用户滚动到页面底部之前滚动到很远的距离，这导致用户无法访问所有内容。

问题允许用户向上/向下滚动以便他们可以看到所有可用内容的最佳方法是什么？

这是我到目前为止所能做的，可以很好地加载内容，但不允许用户查看整个数据集

组件

class Layout extends React.PureComponent { 

    constructor( props ){
        super( props );
        this.state = {
            scroll: 0
        };
    }

    componentDidMount(){
        document.addEventListener( 'scroll', this.handleScroll )
    }

    componentDidUpdate( prevProps, prevState ){
        if( prevState.scroll !== this.state.scroll ){
            this.props.setChunk( ( prevState.scroll < this.state.scroll ) ? DIRECTION_DOWN : DIRECTION_UP );
        }
    }

    // this updates the state on scroll provided the scroll surpases a threshold so we aren't constantly hitting the reducer
    handleScroll = () => {
        let scroll = window.scrollY;
        if( scroll < ( this.state.scroll + SCROLL_THRESHOLD ) && scroll > ( this.state.scroll - SCROLL_THRESHOLD ) ) return;
        this.setState({ scroll });
    }

    render(){
        return (
            <React.Fragment>
                <Title />
                <Tools />
                <Table />
            </React.Fragment> 
        );
    }
}

减速器

case CONSTANTS.SET_CHUNK:

    // determines which direction the records should be added/removed from
    let startIndex = ( action.payload.direction === CONFIG.DIRECTION_UP ) ? ( state.startIndex - 1 ) : ( state.startIndex + 1 ),

    // the chunk of data to be displayed
    chunk = state.data.slice( startIndex, CONFIG.CHUNK_SIZE );

    // prevents the user from scrolling to a non-existant index
    if( startIndex < 0 || startIndex > ( state.data.length - 1 ) ) return { ...state };

    return { ...state, startIndex, chunk };

Answer 1

我认为“无限滚动”将是一个很好的解决方案。因此，只有当用户点击当前列表的底部时，您才会加载下一批数据。

在滚动状态下从大量数据中添加/删除记录的最佳方法

1 个答案: