1
votes

Le fait d'avoir beaucoup de fonctions internes `` d'assistance '' à l'intérieur d'un composant de réaction sans état fonctionnel entraînera une dégradation des performances

J'essaye d'utiliser React Hooks à tout moment donc j'évite d'utiliser des classes. Lors de la récente révision du code, un de mes collègues m'a recommandé de réécrire mon composant en utilisant un composant de classe au lieu d'un composant fonctionnel utilisant des Hooks. Son argument était que chaque fois que mon composant est rendu, toutes les `` fonctions membres internes '' sont à nouveau créées et cela pourrait entraîner de pires performances. J'avais l'impression que l'équipe React voulait que les gens abandonnent les cours autant que possible. Le fait d'avoir beaucoup de fonctions d'assistance à l'intérieur d'un composant fonctionnel sans état entraînerait-il vraiment de mauvaises performances?

const Foo = () => {
   const helper = () => {
      doSomething()
   }
   return (<View />)
 }

OR

class Bar extends Component {
   helper = () => {
      doSomething()
   }
   render() {
      return (<View/>)
   }
}

javascript reactjs react-native performance

3 commentaires

Lorsque l'argument est «cela pourrait nuire aux performances», la première réponse est «nous ne nous soucions pas de la puissance. puis vous faites les deux et faites une analyse des performances. À moins que vous ne construisiez des milliers de composants, je serais très surpris si vous trouviez une différence significative, mais vous devriez tester cela au lieu de demander aux gens qui ne le peuvent pas =)

Je ne suis pas sûr que l'équipe React veuille que les gens abandonnent les cours. Sur la page d'introduction aux hooks: reactjs.org/docs/hooks-intro.html il est dit qu'il n'est pas prévu de supprimer des classes de React. Les crochets sont complètement facultatifs.

Cela aiderait beaucoup si vos exemples montraient comment vous utilisez helper .

3 Réponses :

2
votes

Avec votre premier exemple, un nouvel objet fonction doit être créé à chaque exécution de Foo . C'est donc une perte de mémoire dont vous n'avez pas besoin à moins que le moteur JavaScript ne puisse l'optimiser. (Comme presque tous les problèmes de performances, bien sûr, c'est le genre de chose dont il faut s'inquiéter lorsque vous avez un problème de performance. Bien que si vous faites cela avec beaucoup de petits composants, cela peut s'additionner.)

En fonction de ce dont helper a besoin, vous pouvez le définir en dehors de votre SFC et l'utiliser simplement.

const Foo = (() => {
    const helper = () => {
        doSomething()
    }

    return () => {
        // Presumably you use `helper` here somewhere
        return (<View />)
    }
})()

Si pour une raison quelconque vous n'utilisez pas de modules (!!), pour éviter que helper ne soit global, vous feriez la chose habituelle de cadrage. Peut-être:

// I'm assuming this is in a module, so it's not a global
const helper = () => {
    doSomething()
}

const Foo = () => {
    // Presumably you use `helper` here somewhere
    return (<View />)
}

2 commentaires

L'équipe React est assez claire sur le fait que vous devez le faire si vous souhaitez utiliser des hooks + stateless (en regardant reactjs.org/docs/... , c'est essentiellement le code de cette question) donc je Supposons que ce soit encore plus que suffisamment performant s'il a réussi la version bêta sans exploser pour Facebook lui-même.

@ Mike'Pomax'Kamermans - Ouais, c'est pourquoi j'ai dit "... en fonction de ce dont helper a besoin ..." L'absence de tout appel à helper dans la question le rend gênant. :-)

0
votes

Votre collègue a techniquement raison de dire que les fonctions internes seront instanciées et liées à chaque appel à render () , mais à moins que vous ne restituiez un très grand nombre de composants très fréquemment (à la suite de changements d'état rapides ou quelque chose), le coût total devrait être négligeable.

0 commentaires

0
votes

La fonction d'assistance que vous avez écrite sera recréée à chaque fois que votre composant sera rendu. Vous n'avez pas à définir votre fonction d'assistance à l'intérieur du composant comme vous le faites. Si vous voulez vraiment utiliser React Hooks dans votre projet, regardez les hooks qui répondront à vos besoins dans différentes situations. Par exemple, vous pouvez utiliser useCallback si vous avez besoin d'une fonction d'assistance pour appeler certaines actions sur les interactions des utilisateurs. Votre code ressemblera à ceci:

const Foo = (props) => {
   const helper = useCallback(() => {
      doSomething(props.id);
   }, [props.id]);
   return (<View />)
 }

Cette fonction ne sera créée que sur le premier rendu. Si votre fonction dépend de certains accessoires, vous pouvez passer ces accessoires en tant que valeurs d'entrée à useCallback . Ce rappel sera recréé lorsque quelque chose change. Par exemple:

const Foo = () => {
   const helper = useCallback(() => {
      doSomething()
   }, []);
   return (<View />)
 }

0 commentaires