React-window: Changer les accessoires d'un élément mettra à jour toute la liste

J'ai exactement le même cas d'utilisation et le même problème, et je n'ai pas été en mesure de trouver une solution ...

En effet, la modification d'un élément crée un nouveau tableau items qui crée un nouvel objet itemData . Il est important que les techniques de mémorisation soient invalidées puis leurs données changent.

Si vous voulez que les éléments soient plus robustes à ce type de changement, vous pouvez implémenter votre propre fonction areEqual (ou shouldComponentUpdate ).

Le but de la démo est simplement de montrer comment itemData et la mémorisation peuvent travailler ensemble pour transmettre des valeurs complexes.

Je l'ai testé avec ma propre fonction shouldComponentUpdate mais cette fonction ne sera pas exécutée si le composant est démonté encore et encore

si le composant est démonté encore et encore

Il n'y a aucun moyen de mémoriser un composant qui est démonté. Ce n'est pas ce qui se passe dans ma démo. Si c'est ce qui se passe dans votre application, il se passe autre chose - et je ne peux pas spéculer sur quoi.

@BertelBB Avez-vous trouvé une solution?

@ffjanhoeck Pas vraiment, non. J'ai réalisé que mon cas d'utilisation est en fait un peu différent dans le sens où ma liste peut également être triée / filtrée. Ce que j'ai fait, c'est de transmettre les accessoires itemData et itemKey afin de définir manuellement l'accessoire clé pour chaque élément. La liste entière est toujours mise à jour mais elle n'est pas aussi lente qu'avant.
https://react-window.now.sh/#/api/FixedSizeList ici, vous pouvez lire les accessoires dont je parle.

@BertelBB J'ai déjà implémenté cette fonction hier, merci :)
Mais le problème n'est pas résolu :(
Voici un GIF qui est laggy - comme vous pouvez le voir, il a fallu quelques millisecondes pour vérifier un élément.
Tout est mémorisé ou a un shouldComponentUpdate implémenté.

@ffjanhoeck Oui, j'ai le même problème. Je n'ai malheureusement pas le temps d'approfondir cette question pour le moment. Mais je vous ferai savoir si je trouve une meilleure solution :)

@ffjanhoeck Est-ce que je pourrais jeter un œil à l'application que vous avez montrée dans le GIF ci-dessus? Je serais curieux d'exécuter un profileur et de voir d'où vient la lenteur.

@bvaughn Oui, bien sûr - je vous ai envoyé les informations d'identification sur votre e-mail! :)

Je pense que la lenteur vient du court aperçu d'un élément (l'image et le texte bleu avec le texte secondaire représentent le composant EntityShortPreview). Mais ce n'est pas un problème pour un seul article. Le problème est que tous les éléments sont démontés et montés sur select et si vous résumez cela, alors c'est lent.

C'est mon sentiment actuel: D Mais peut-être que vous pouvez trouver d'autres problèmes :)

Cela se produit si un utilisateur sélectionne un élément

@ffjanhoeck J'ai rencontré exactement le même problème, et après quelques recherches, j'ai réussi à en comprendre la cause: c'est parce que nous utilisons des fonctions anonymes comme rendus d'élément, au lieu de composants nommés. Je ne suis pas un gourou de React, mais je pense que cela gâche la réconciliation de React, car les composants ne sont pas reconnaissables entre les rendus.

J'ai fait un exemple CodeSandbox illustrant le problème ici: https://codesandbox.io/s/qx4088mn36

Je pense que cela est également lié à la conversation ici: https://github.com/bvaughn/react-window/issues/85#issuecomment -436329610

C'est ce que je vois aussi après un rapide coup d'œil ce matin. (J'écrivais un e-mail mais j'ai été interrompu.) Le déplacement de la fonction en ligne vers un accessoire d'instance a accéléré les choses (mais a également cassé quelques autres choses que je n'ai pas eu le temps de retrouver en raison de la taille du cas de repro).

Je pense que cela gâche la réconciliation de React, car les composants ne sont pas reconnaissables entre les rendus.

C'est correct. 👍

Hmm. C'est malheureux, car j'écris mon projet en utilisant ReasonReact, qui manque (actuellement) des accessoires nécessaires en termes de diffusion / fonctionnalités de composants fonctionnels pour éviter ce problème. Je reconnais que ce n'est en aucun cas un problème avec react-window, juste une limitation du système de type de ReasonML, mais je suppose que cela vaut la peine d'être mentionné au cas où quelqu'un d'autre tomberait sur ce fil.

Pour être clair, c'est pourquoi tous les exemples de documentation montrent que le rendu de l'élément est défini en dehors du composant parent, et l' exemple de mémorisation montre comment partager des données entre les deux. (Fondamentalement, c'est comme un contexte intégré plus léger.)

Super, je vais jeter un oeil! :)

Votre solution a résolu le problème! Merci et bonne journée