Game of Life in React / Redux, aide à améliorer les performances

Je travaille sur une version de The Game of Life dans reac / redux / javascript, alors que je l'ai fonctionné, la performance est horrible.

Voici un lien vers le jeu en cours Voici la source sur githhub

À l'heure actuelle, je suis à chaque tick (250.500.750ms modifiable par l'utilisateur) mettant à jour l'état de chaque cellule. Pour cela, je passe un ensemble d'objets qui représentent chaque cellule. Dans chaque objet se trouve un paramètre appelé statut qui peut être un nombre entier sur 1 pour vivant ou 0 pour mort.

Je lance ensuite trois rangées de trois cellules, pour les lignes supérieures et inférieures ci-dessus autour de la cellule en question, puis je résume ces valeurs (à l'exclusion de la cellule elle-même au centre).

Je lance alors ce nombre à travers un flux if / then pour décider du nouvel état de cette cellule.

Ce processus se répète ensuite pour chaque cellule de l'application. Une fois qu'il est terminé, le nouvel état de chaque cellule est envoyé via redux et la mise à jour des composants au besoin.

Dans la vue actuelle, chaque cellule est un composant réactif qui reçoit son état comme support du conteneur qui est la grille. J'ai configuré shoulComponentRender () pour ne plus redéfinir la cellule quand il s'agit de changements d'état de vie.

Je pense que le profil de l'application (dont je ne suis pas très clair / bon) est que c'est le processus de calcul de toutes les valeurs qui ralentissent les choses, mais je peux me tromper et ce pourrait être les composants React qui causent le problème.

Toute aide / assistance appréciée!

Je pense que ce pourrait être le problème. En profilant, nous voyons:

Entrez la description de l'image ici

Vous avez des éclats de travail avec un intervalle régulier, chacun prenant environ 85 ms qui est très anormal. En regardant vers le bas de la pile d'appel, il y a un triggerTimer et une fonction de startTimer suivante.

En regardant le code source pour ceux-ci: https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12 .

Vous devez revenir de startTimer dans la condition. Sinon, triggerTimer et startTimer s'appelleront le plus rapidement possible, générant de nouveaux délais d'attente à chaque fois.

Avant

  startTimer(){ var that = this; if(this.props.controls.game === 'running'){ this.props.stepState(); } setTimeout(() => this.triggerTimer(), this.props.controls.speed); } triggerTimer(){ this.startTimer(); } 

Après

 startTimer(){ var that = this; if(this.props.controls.game === 'running'){ this.props.stepState(); // Return here return; } setTimeout(() => this.triggerTimer(), this.props.controls.speed); } triggerTimer(){ this.startTimer(); } 

Ainsi, à la fin, nous n'avons jamais eu les performances à un niveau satisfaisant en utilisant les composants DOM et html. J'ai donc réécrit le code de la grille pour rendre toutes les cellules en utilisant HTM5 Canvas et la performance n'est plus un problème, en fait, elle est maintenant très heureuse sur l'iPhone.