ReactJS: Modélisation du défilement infini bidirectionnel
Notre application utilise un défilement infini pour naviguer dans de grandes listes d’articles hétérogènes. Il y a quelques rides:
- Il est courant pour nos utilisateurs d’avoir une liste de 10 000 éléments et de faire défiler 3k +.
- Ce sont des éléments riches, de sorte que nous ne pouvons avoir que quelques centaines dans le DOM avant que les performances du navigateur ne deviennent inacceptables.
- Les articles sont de différentes hauteurs.
- Les éléments peuvent contenir des images et nous permettons à l'utilisateur de sauter à une date spécifique. C'est délicat, car l'utilisateur peut accéder à un point de la liste où il est nécessaire de charger des images au-dessus de la fenêtre d'affichage, ce qui réduirait le contenu lors du chargement. Ne pas gérer cela signifie que l'utilisateur peut sauter à une date, mais être ensuite décalé à une date antérieure.
Solutions connues et incomplètes:
( react-infinite-scroll ) - Il ne s'agit que d'un simple composant "chargez davantage lorsque vous frappez le bas". Il ne cueille aucun des DOM, il mourra donc sur des milliers d'articles.
( Position de défilement avec React ) - Montre comment enregistrer et restaurer la position de défilement lors de l'insertion en haut ou insertion en bas, mais pas les deux ensemble.
Je ne cherche pas le code pour une solution complète (même si ce serait génial.) Au lieu de cela, je cherche le "moyen React" pour modéliser cette situation. La position de défilement est-elle ou non? Quel état dois-je suivre pour conserver ma position dans la liste? Quel état dois-je conserver pour pouvoir déclencher un nouveau rendu lorsque je fais défiler vers le haut ou le bas de ce qui est rendu?
C'est un mélange d'un tableau infini et d'un scénario de défilement infini. La meilleure abstraction que j'ai trouvée pour ceci est la suivante:
Vue d'ensemble
Faire un <List> composant qui prend un tableau de tous les enfants . Puisque nous ne les rendons pas, il est très économique de simplement les allouer et de les jeter. Si les allocations de 10 000 $ sont trop importantes, vous pouvez plutôt transmettre une fonction qui prend une plage et renvoie les éléments.
<List>
{thousandelements.map(function() { return <Element /> })}
</List>
Votre composant List garde la trace de la position de défilement et ne rend que les enfants visibles. Il ajoute un grand div vide au début pour simuler les éléments précédents qui ne sont pas rendus.
Ce qui est intéressant, c’est qu’une fois qu’un composant Element est rendu, vous mesurez sa hauteur et vous le stockez dans votre List. Cela vous permet de calculer la hauteur de l’entretoise et de savoir combien d’éléments doivent être affichés dans la vue.
Image
Vous dites que lorsque l'image est en train de charger, elle fait tout "sauter" vers le bas. La solution à cela est de définir les dimensions de l’image dans votre tag img: <img src="..." width="100" height="58" />. De cette façon, le navigateur n'a pas besoin d'attendre pour le télécharger avant de savoir quelle taille il va afficher. Cela nécessite des infrastructures mais cela en vaut vraiment la peine.
Si vous ne pouvez pas connaître la taille à l'avance, ajoutez onload auditeurs à votre image. Lorsque cette image est chargée, mesurez la dimension affichée, actualisez la hauteur de la ligne enregistrée et compensez la position de défilement.
Sauter à un élément aléatoire
Si vous devez sauter à un élément aléatoire de la liste, cela nécessitera quelques astuces avec la position de défilement, car vous ne connaissez pas la taille des éléments entre les deux. Je vous suggère de faire la moyenne des hauteurs d'éléments que vous avez déjà calculées et de passer à la position de défilement de la dernière hauteur connue + (nombre d'éléments * en moyenne).
Comme ce n’est pas exact, des problèmes se poseront lorsque vous revenez à la dernière bonne position connue. Lorsqu'un conflit survient, changez simplement la position du défilement pour le résoudre. Cela va déplacer la barre de défilement un peu, mais ne devrait pas trop l’affecter.
Détails de la réaction
Vous voulez fournir une clé à tous les éléments rendus afin qu'ils soient gérés tout au long des rendus. Il existe deux stratégies: (1) n’avoir que n touches (0, 1, 2, ... n) où n est le nombre maximum d’éléments que vous pouvez afficher et utiliser leur position modulo n. (2) ont une clé différente par élément. Si tous les éléments partagent une structure similaire, il est bon d'utiliser (1) pour réutiliser leurs nœuds DOM. Si ce n'est pas le cas, utilisez (2).
Je n’aurais que deux éléments de l’état React): l’index du premier élément et le nombre d’éléments affichés. La position de défilement actuelle et la hauteur de tous les éléments seraient directement associées à this. Lorsque vous utilisez setState, vous effectuez une restitution, ce qui ne devrait se produire que lorsque la plage change.
Voici une exemple liste infinie utilisant certaines des techniques que je décris dans cette réponse. Cela va demander du travail, mais React est définitivement un bon moyen de mettre en oeuvre une liste infinie :)
regardez http://adazzle.github.io/react-data-grid/index.html# Cela ressemble à une grille de données puissante et performante avec des fonctionnalités similaires à celles d'Excel et un chargement optimisé/un rendu optimisé (pour des millions de lignes) avec des fonctionnalités d'édition riches (sous licence MIT). Pas encore essayé dans notre projet mais le fera bientôt.
Une excellente ressource pour la recherche de choses comme celles-ci est aussi http://react.rocks/ Dans ce cas, une recherche de balise est utile: http://react.rocks/tag/ InfiniteScroll
Je me trouvais face à un défi similaire pour la modélisation du défilement infini dans une seule direction avec des hauteurs d’article hétérogènes.
https://www.npmjs.com/package/react-variable-height-infinite-scroller
et une démo: http://tnrich.github.io/react-variable-height-infinite-scroller/
Vous pouvez consulter le code source pour connaître la logique, mais j’ai essentiellement suivi la recette @Vjeux décrite dans la réponse ci-dessus. Je n'ai pas encore abordé le saut à un élément particulier, mais j'espère le mettre en œuvre bientôt.
Voici le résumé de ce à quoi le code ressemble actuellement:
var React = require('react');
var areNonNegativeIntegers = require('validate.io-nonnegative-integer-array');
var InfiniteScoller = React.createClass({
propTypes: {
averageElementHeight: React.PropTypes.number.isRequired,
containerHeight: React.PropTypes.number.isRequired,
preloadRowStart: React.PropTypes.number.isRequired,
renderRow: React.PropTypes.func.isRequired,
rowData: React.PropTypes.array.isRequired,
},
onEditorScroll: function(event) {
var infiniteContainer = event.currentTarget;
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
var currentAverageElementHeight = (visibleRowsContainer.getBoundingClientRect().height / this.state.visibleRows.length);
this.oldRowStart = this.rowStart;
var newRowStart;
var distanceFromTopOfVisibleRows = infiniteContainer.getBoundingClientRect().top - visibleRowsContainer.getBoundingClientRect().top;
var distanceFromBottomOfVisibleRows = visibleRowsContainer.getBoundingClientRect().bottom - infiniteContainer.getBoundingClientRect().bottom;
var rowsToAdd;
if (distanceFromTopOfVisibleRows < 0) {
if (this.rowStart > 0) {
rowsToAdd = Math.ceil(-1 * distanceFromTopOfVisibleRows / currentAverageElementHeight);
newRowStart = this.rowStart - rowsToAdd;
if (newRowStart < 0) {
newRowStart = 0;
}
this.prepareVisibleRows(newRowStart, this.state.visibleRows.length);
}
} else if (distanceFromBottomOfVisibleRows < 0) {
//scrolling down, so add a row below
var rowsToGiveOnBottom = this.props.rowData.length - 1 - this.rowEnd;
if (rowsToGiveOnBottom > 0) {
rowsToAdd = Math.ceil(-1 * distanceFromBottomOfVisibleRows / currentAverageElementHeight);
newRowStart = this.rowStart + rowsToAdd;
if (newRowStart + this.state.visibleRows.length >= this.props.rowData.length) {
//the new row start is too high, so we instead just append the max rowsToGiveOnBottom to our current preloadRowStart
newRowStart = this.rowStart + rowsToGiveOnBottom;
}
this.prepareVisibleRows(newRowStart, this.state.visibleRows.length);
}
} else {
//we haven't scrolled enough, so do nothing
}
this.updateTriggeredByScroll = true;
//set the averageElementHeight to the currentAverageElementHeight
// setAverageRowHeight(currentAverageElementHeight);
},
componentWillReceiveProps: function(nextProps) {
var rowStart = this.rowStart;
var newNumberOfRowsToDisplay = this.state.visibleRows.length;
this.props.rowData = nextProps.rowData;
this.prepareVisibleRows(rowStart, newNumberOfRowsToDisplay);
},
componentWillUpdate: function() {
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
this.soonToBeRemovedRowElementHeights = 0;
this.numberOfRowsAddedToTop = 0;
if (this.updateTriggeredByScroll === true) {
this.updateTriggeredByScroll = false;
var rowStartDifference = this.oldRowStart - this.rowStart;
if (rowStartDifference < 0) {
// scrolling down
for (var i = 0; i < -rowStartDifference; i++) {
var soonToBeRemovedRowElement = visibleRowsContainer.children[i];
if (soonToBeRemovedRowElement) {
var height = soonToBeRemovedRowElement.getBoundingClientRect().height;
this.soonToBeRemovedRowElementHeights += this.props.averageElementHeight - height;
// this.soonToBeRemovedRowElementHeights.Push(soonToBeRemovedRowElement.getBoundingClientRect().height);
}
}
} else if (rowStartDifference > 0) {
this.numberOfRowsAddedToTop = rowStartDifference;
}
}
},
componentDidUpdate: function() {
//strategy: as we scroll, we're losing or gaining rows from the top and replacing them with rows of the "averageRowHeight"
//thus we need to adjust the scrollTop positioning of the infinite container so that the UI doesn't jump as we
//make the replacements
var infiniteContainer = React.findDOMNode(this.refs.infiniteContainer);
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
var self = this;
if (this.soonToBeRemovedRowElementHeights) {
infiniteContainer.scrollTop = infiniteContainer.scrollTop + this.soonToBeRemovedRowElementHeights;
}
if (this.numberOfRowsAddedToTop) {
//we're adding rows to the top, so we're going from 100's to random heights, so we'll calculate the differenece
//and adjust the infiniteContainer.scrollTop by it
var adjustmentScroll = 0;
for (var i = 0; i < this.numberOfRowsAddedToTop; i++) {
var justAddedElement = visibleRowsContainer.children[i];
if (justAddedElement) {
adjustmentScroll += this.props.averageElementHeight - justAddedElement.getBoundingClientRect().height;
var height = justAddedElement.getBoundingClientRect().height;
}
}
infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustmentScroll;
}
var visibleRowsContainer = React.findDOMNode(this.refs.visibleRowsContainer);
if (!visibleRowsContainer.childNodes[0]) {
if (this.props.rowData.length) {
//we've probably made it here because a bunch of rows have been removed all at once
//and the visible rows isn't mapping to the row data, so we need to shift the visible rows
var numberOfRowsToDisplay = this.numberOfRowsToDisplay || 4;
var newRowStart = this.props.rowData.length - numberOfRowsToDisplay;
if (!areNonNegativeIntegers([newRowStart])) {
newRowStart = 0;
}
this.prepareVisibleRows(newRowStart , numberOfRowsToDisplay);
return; //return early because we need to recompute the visible rows
} else {
throw new Error('no visible rows!!');
}
}
var adjustInfiniteContainerByThisAmount;
//check if the visible rows fill up the viewport
//tnrtodo: maybe put logic in here to reshrink the number of rows to display... maybe...
if (visibleRowsContainer.getBoundingClientRect().height / 2 <= this.props.containerHeight) {
//visible rows don't yet fill up the viewport, so we need to add rows
if (this.rowStart + this.state.visibleRows.length < this.props.rowData.length) {
//load another row to the bottom
this.prepareVisibleRows(this.rowStart, this.state.visibleRows.length + 1);
} else {
//there aren't more rows that we can load at the bottom so we load more at the top
if (this.rowStart - 1 > 0) {
this.prepareVisibleRows(this.rowStart - 1, this.state.visibleRows.length + 1); //don't want to just shift view
} else if (this.state.visibleRows.length < this.props.rowData.length) {
this.prepareVisibleRows(0, this.state.visibleRows.length + 1);
}
}
} else if (visibleRowsContainer.getBoundingClientRect().top > infiniteContainer.getBoundingClientRect().top) {
//scroll to align the tops of the boxes
adjustInfiniteContainerByThisAmount = visibleRowsContainer.getBoundingClientRect().top - infiniteContainer.getBoundingClientRect().top;
// this.adjustmentScroll = true;
infiniteContainer.scrollTop = infiniteContainer.scrollTop + adjustInfiniteContainerByThisAmount;
} else if (visibleRowsContainer.getBoundingClientRect().bottom < infiniteContainer.getBoundingClientRect().bottom) {
//scroll to align the bottoms of the boxes
adjustInfiniteContainerByThisAmount = visibleRowsContainer.getBoundingClientRect().bottom - infiniteContainer.getBoundingClientRect().bottom;
// this.adjustmentScroll = true;
infiniteContainer.scrollTop = infiniteContainer.scrollTop + adjustInfiniteContainerByThisAmount;
}
},
componentWillMount: function(argument) {
//this is the only place where we use preloadRowStart
var newRowStart = 0;
if (this.props.preloadRowStart < this.props.rowData.length) {
newRowStart = this.props.preloadRowStart;
}
this.prepareVisibleRows(newRowStart, 4);
},
componentDidMount: function(argument) {
//call componentDidUpdate so that the scroll position will be adjusted properly
//(we may load a random row in the middle of the sequence and not have the infinte container scrolled properly initially, so we scroll to the show the rowContainer)
this.componentDidUpdate();
},
prepareVisibleRows: function(rowStart, newNumberOfRowsToDisplay) { //note, rowEnd is optional
//setting this property here, but we should try not to use it if possible, it is better to use
//this.state.visibleRowData.length
this.numberOfRowsToDisplay = newNumberOfRowsToDisplay;
var rowData = this.props.rowData;
if (rowStart + newNumberOfRowsToDisplay > this.props.rowData.length) {
this.rowEnd = rowData.length - 1;
} else {
this.rowEnd = rowStart + newNumberOfRowsToDisplay - 1;
}
// var visibleRows = this.state.visibleRowsDataData.slice(rowStart, this.rowEnd + 1);
// rowData.slice(rowStart, this.rowEnd + 1);
// setPreloadRowStart(rowStart);
this.rowStart = rowStart;
if (!areNonNegativeIntegers([this.rowStart, this.rowEnd])) {
var e = new Error('Error: row start or end invalid!');
console.warn('e.trace', e.trace);
throw e;
}
var newVisibleRows = rowData.slice(this.rowStart, this.rowEnd + 1);
this.setState({
visibleRows: newVisibleRows
});
},
getVisibleRowsContainerDomNode: function() {
return this.refs.visibleRowsContainer.getDOMNode();
},
render: function() {
var self = this;
var rowItems = this.state.visibleRows.map(function(row) {
return self.props.renderRow(row);
});
var rowHeight = this.currentAverageElementHeight ? this.currentAverageElementHeight : this.props.averageElementHeight;
this.topSpacerHeight = this.rowStart * rowHeight;
this.bottomSpacerHeight = (this.props.rowData.length - 1 - this.rowEnd) * rowHeight;
var infiniteContainerStyle = {
height: this.props.containerHeight,
overflowY: "scroll",
};
return (
<div
ref="infiniteContainer"
className="infiniteContainer"
style={infiniteContainerStyle}
onScroll={this.onEditorScroll}
>
<div ref="topSpacer" className="topSpacer" style={{height: this.topSpacerHeight}}/>
<div ref="visibleRowsContainer" className="visibleRowsContainer">
{rowItems}
</div>
<div ref="bottomSpacer" className="bottomSpacer" style={{height: this.bottomSpacerHeight}}/>
</div>
);
}
});
module.exports = InfiniteScoller;