Ne rafraichir qu'un seul composant

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:

---

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:

---

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:

---

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

Salut,

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

Code:

---

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à)

Citation:

---

Envoyé par topolino

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?

Citation:

---

Envoyé par 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:

---

1 2 3 4 5

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

---