Fonctions dans les composants sans état?

Question

Je suis en train de convertir ce cool <canvas> d'animation que j'ai trouvé ici dans une Réagir composant réutilisable. Il semble que ce composant nécessite un composant parent pour la toile, et de nombreux enfants de composants pour l' function Ball().

Pour des raisons de performances, il serait probablement mieux de faire l' Balls dans apatrides composants qu'il y aura beaucoup d'entre eux. Je ne suis pas aussi familier avec la rendant apatrides des composants et je me demandais où je devrais définir l' this.update() et this.draw fonctions qui sont définies en function Ball().

Faire des fonctions pour les apatrides composants à l'intérieur du composant ou à l'extérieur? En d'autres termes, ce qui est le mieux?

1:

const Ball = (props) => {
    const update = () => {
        ...
    }

    const draw = () => {
        ...
    }

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

const Ball = (props) => {
    return (
       ...
    );
}

Quels sont les avantages/inconvénients de chacun et sont l'un des meilleurs pour des cas d'utilisation spécifiques comme la mienne?

Answer 1

Première chose à noter est que les apatrides fonctionnelle des composants ne peuvent pas avoir des méthodes, vous ne devriez pas compter sur l'appel de update ou draw sur un rendu Ball si c'est un apatride composante fonctionnelle.

Dans la plupart des cas, vous devez déclarer les fonctions en dehors de la composante de fonction, de manière à les déclarer qu'une seule fois et toujours la réutilisation de la même référence. Lorsque vous déclarez une fonction à l'intérieur, chaque fois que le composant est rendu la fonction sera définie de nouveau.

Il ya des cas où vous aurez besoin de définir une fonction à l'intérieur du composant, par exemple, de céder un gestionnaire d'événements qui se comporte différemment en fonction des propriétés du composant. Mais encore, vous pouvez définir une fonction à l'extérieur Ball et le lier avec les propriétés, rendant le code plus propre et de faire de l' update ou draw fonctions réutilisables.

// You can use update somewhere else
const update (propX, a, b) => { ... };

const Ball = props => (
  <Something onClick={update.bind(null, props.x)} />
);

au lieu de:

const Ball = props => {
  function update(a, b) {
    // props.x is visible here
  }

  return (
    <Something onClick={update} />
  );
}

Answer 2

Nous pouvons avoir des fonctions à l'intérieur de composants fonctionnels sans état, voici l'exemple:

  const Action = () => {
  function  handlePick(){
     alert("test");
  }
  return (
    <div>
      <input type="button" onClick={handlePick} value="What you want to do ?" />
    </div>
  );
}
 

Cependant, ce n'est pas une bonne pratique car la fonction handlePick() sera définie chaque fois que le composant est appelé.

Answer 3

2: c'est bien, mais il y a une tragédie quand on veut utiliser des accessoires.

La meilleure pratique est d'utiliser les fonctions useHooks, comme la fonction useCallback.

les importer de la bibliothèque de réaction.