La bonne façon de lever l'état dans React

Question

Je suis nouveau à React et j'essaie de faire une grille de données, ça fonctionne maintenant mais j'ai l'impression de mal faire les choses, voici les détails :

Chaque ligne a plusieurs entrées (texte, sélection, bouton), et nous avons la possibilité de supprimer, insérer des lignes.

Maintenant, j'ai un GridComponent qui contient toutes les données sous forme de tableau d'objets. Lors du rendu, il passera l'objet à RowComponent avec un handle à appeler lorsque l'entrée change :

this.state.data.map((rowdata, index) => 
    <RowComponent 
       key={rowdata.id} 
       rowdata={rowdata} 
       dataindex={index} 
       handleChange={this.handleChange} 
    />
) 

Le problème est que lorsque RowComponent appelle handleChange le GridComponent utilise le rowindex pour mettre à jour l'objet. Mais c'est lent et il y a un petit délai lors de la saisie.

Pour résoudre ce problème, je déclare alors un état dans le fichier RowComponent pour contrôler les données pendant la frappe et appeler seulement handleChange sur le onBlur et ça marche très bien. Mais maintenant j'ai 2 états dans la grille et la rangée, est-ce la bonne façon de faire ?

Answer 1

Avez-vous profilé votre code pour identifier les pièces les plus lentes ?

Vous semblez l'avoir fait de manière acceptable sans utiliser de flux. Cela devrait être un problème avec beaucoup de rendus fréquents et évitables. Il s'agit surtout de mettre des shouldComponentUpdate contrôles. A moins que vous fixer Dans ce cas, l'externalisation de l'état n'est pas utile (sauf pour les bibliothèques qui utilisent des approches basées sur la méthode forceUpdate, telles que MobX ).

De même, pour les entrées, vous devriez préférer avoir soit débouché les gestionnaires d'événements, ou avoir un état interne fantôme (comme vous l'avez fait), plutôt que de propager tous les changements immédiatement.