React.JS Performance Boost dans l'ensemble

Personnellement, le meilleur conseil que je puisse vous donner est d'éviter d'écrire une logique qui met à jour fréquemment l'état de votre composant. Vous ne voulez pas que votre composant appelle constamment this.setState ({}) car cela crée une sorte de décalage déformé qui peut affecter votre application à la fois visuellement et en termes de performances.

Évitez absolument d'écrire des trucs comme:

import React from "react"

class Example extends React.Component{
    state = {
      tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
    }

    createTests = () => {
       const tests = this.state.tests
       if(tests.length > 0){
          return tests.map((test) => {
               return <div>{test.name}</div>
          })
       }
    }

    render(){
      const tests = this.state.tests
      return(
         <div>
             {this.createTests()}
         </div>
      )
    }
}

Mais tout en étant également sur ce sujet, utilisez vos méthodes de cycle de vie, en particulier componentDidMount () et componentDidUpdate () ils sont incroyablement utiles pour contrôler la logique à l'intérieur de votre composant. D'une certaine manière, ils peuvent également améliorer votre composant en lui donnant une sorte de mécanisme de respiration pour traiter les données.

Enfin, c'est plus une préférence, mais si vous voulez avoir une bonne lisibilité du code, je suggérerait de créer une fonction pour générer votre balisage au lieu de l'écrire directement dans votre méthode de rendu.

Considérant le code suivant:

import React from "react"

class Example extends React.Component{
    state = {
      tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
    }

    render(){
      const tests = this.state.tests
      return(
         <div>
            { tests.length > 0 && tests.map((test) => {
               return <div>{test.name}</div>   
             })}
         </div>
      )
    }
}

Ceci le code est parfaitement bien tel quel, mais vous pouvez le rendre plus facile à lire pour quelqu'un d'autre simplement en créant une autre fonction pour votre balisage.

Révisé:

componentDidUpdate(){
   this.setStatE({
      field: this.props.newData
   })
}

Fait la même chose, mais maintenant c'est très clair ce que nous essayons d'accomplir dans notre méthode de rendu.

Il y a deux choses que nous avons implémentées. Nous avons utilisé un plugin pour déterminer combien de rendus gaspillés nous avons et c'était 60%. Pour résoudre ce problème, nous avons fait deux choses. 1.Nous pouvons utiliser le raccordement du cycle de vie pour déterminer s'il y a un changement de propriété. 2. Minimisez la relation parent-enfant entre les composants. 3.Si nous utilisons n'importe quel type de redux pour gérer l'état, nous devrions avoir un composant de niveau supérieur connecté pour stocker et transmettre les données comme accessoires au composant enfant. 4. pour l'appel Asyc, il faut faire attention si nous le voulons dans compoentDidMount ou ComponentWillmount comme si les données de l'appel asyc sont requises dans le composant enfant ou non.

Il existe de nombreuses options pour optimiser votre application React, trop pour couvrir une seule réponse. Mon conseil ici est, démarrez votre application, ouvrez DevTools et accédez à Audit, lancez le test Lighthouse. Le Test montrera certaines actions qui peuvent être faites pour optimiser votre code et aussi des ressources à lire.

Si vous avez des questions plus concrètes, posez-les. Votre question actuelle est un peu trop difficile à couvrir en une seule réponse. Ou code postal, que vous souhaitez optimiser.