Discussion :

[topolino]

Bonjour à tous,

Je suis en train de developper une application en temps réel avec les websockets.
Les donneés que je recois me permette de constituer un tableau html oû les cellules doivent se mettre à jour continuellement.
Mon probleme, est qu'a chaque fois que je recois une mise à jour d'une ligne de mon tableau alors react me rafraichit l'intergralité des lignes, ce qui detruit les performances. Comment dois je proceder ?

Lorsque je recois une mise à jour de donnée pour une ligne, je mets à jour mon array de données

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 this.items[index][4] = stockItem[4];
 this.items[index][5] = stockItem[5];
 this.items[index][2] = stockItem[2];
 
 this.setState({
      quotes: this.items
    });

Puis je mets à jours mon tableau html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
const itemsT = this.state.quotes.map((item, index) => (
      <div key={item["requestId"]}>
        <TableRow quote={item} />
        <br />
      </div>
    ));

Mais au lieu de mettre à jour uniquement la ligne concernée, avec la map toutes mes lignes sont continuellement mise à jour.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
class TableRow extends Component {
  render() {
    return (
      <div>
        {this.props.quote[4]} - {this.props.quote[2]} - {this.props.quote[5]}
      </div>
    );
  }
}

Comment dois je proceder ?

Merci pour vos avis

[gwyohm]

Salut,

As-tu essayé d'implémenter shouldComponentUpdate dans le composant TableRow ?
Quelque chose comme ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
shouldComponentUpdate(nextProps) {
    if (this.props.quote.length !== nextProps.quote.length) {
      return true;
    }
    return nextProps.quote.some((item, index) => item !== this.props.quote[index]);
  }

Je ne sais pas trop ce que contiennent tes données dans quote, mais avec ce code, on indique à react qu'il est nécessaire de rafraichir le composant si

1. la taille du tableau props.quote a changée (ici la taille compte...)
2. au moins une entrée dans quote a changée (à adapter si tu a des objets qui ne peuvent pas être comparée bêtement comme je le fais là)

[frfancha]

Bonjour à tous,...

Bonjour,
Que veux-tu dire par React rafraichit l'intégralité des lignes?
Si tu veux dire il fait le 'render' pour toutes les lignes, oui c'est normal.
Mais ce 'render' est en pur javascript, il ne touchera pas le DOM, cela devrait être quasi instantané
Le code serait-il dispo quelque part pour essayer?

[frfancha]

Bonjour,...

Aussi, tu n'as aucun état dans ton TableRow, donc il faudrait en faire une fonction ça va bien aider les perfs.

comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const TableRow  = ({quote}) => (
      <div>
        {quote[4]} - {quote[2]} - {quote[5]}
      </div>
);