Я работаю над рефакторингом приложения ReactJS на работе, которое предоставляет пользователям большой объем контента (1k + записей), а также позволяет им применять сложные фильтры к указанному контенту (диапазоны, переключатели, исключения и т. Д.) ...
Поскольку рендеринг большого объема данных, подобных этому, очень облагает налогом на компьютере пользователя (особенно в IE11 или на грани), я принял решение когда-либо рендерить только фрагмент из 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 };