Réagissez où dans le composant pour ajouter une fonction mathématique simple

Il suffit de le mettre dans la classe et de l'appeler par {this.doMath ()} dans la méthode de rendu

class MyClass extends Component {
    constructor( props ) {
        super( ...arguments );
    }

    doMath() {
       const { width, height } = this.props.attributes;
       const result = 100 / (width / height);
       return result;
    }

    render() {
        const { attributes } = this.props; /* attributes passed from parent component */
        const { width, height } = attributes;

        return (
           {this.doMath()}
        )
    }
}

La troisième méthode n'est certainement pas correcte. L'ajout de la fonction à l'intérieur de la méthode render créera une nouvelle fonction doMath chaque fois que votre composant re-rend , et ce n'est pas une façon efficace de faire

Si vous savez avec certitude que vous allez utiliser la fonction doMath uniquement pour ce composant particulier, je suggère de le définir dans le module du composant sans l'exporter. J'opterais donc pour la deuxième méthode.

Si cette fonction ne dépend que de la largeur et de la hauteur , alors c'est bien de l'avoir en dehors de la classe du composant . Sinon, si vous pensez que cela peut dépendre davantage de l ' état , vous pouvez le mettre dans la classe pour ne pas être obligé de transmettre l'état du composant.

Conclusion: en fonction de la quantité de données que vous allez passer à la fonction doMath , vous pouvez la créer soit à l'intérieur de la classe, soit à l'extérieur de celle-ci; mais jamais dans la méthode render .

EDIT: Quelque chose que j'ai oublié de mentionner utilise une méthode statique . En gros, si vous ne définissez pas la méthode static , elle sera créée pour chaque instance de votre composant et pourra utiliser d'autres membres de la classe:

(A) Si la méthode n'est pas statique:

const MyComponent = require('/path/to/MyComponent');
MyComponent.doMath(); // undefined

(B) Si la méthode est statique:

function doMath(width, height) {
  // do magic
  return result;
}

class MyComponent extends React.Component {
  render() {
    const {width, height} = this.state;
    const result = doMath(width, height);

    // render something
    // use result
  }
}

// emphasize export
module.exports = MyComponent;

(C) Et pour être complet, définissons également la fonction en dehors de la classe:

class MyComponent extends React.Component {
  /* private */ static doMath(width, height) {
    // do something with them
    // no access to state or the component's instance
  }

  render() {
    const {width, height} = this.state;

    const result = MyComponent.doMath(width, height);

    // render something
  }
}

Comparaison

Lorsque vous utilisez quelque chose comme TypeScript, les méthodes (B) et (C) donnent fondamentalement le même résultat: vous pouvez isoler les fonctionnalités en spécifiant la méthode static privé . Cependant, lorsque j'utilise JavaScript, je préfère (C) car si je le fais

class MyComponent extends React.Component {
  /* private */ doMath() {
    // You have access to this particular instance and its state
    const {width, height} = this.state; 
  }
}

je ne peux pas utiliser la fonction doMath car je ne devrais pas. Avec ces deux méthodes, vous devez passer les données requises à la fonction / méthode en tant que paramètres (c'est-à-dire que vous n'avez pas accès à l'état interne de l'instance du composant).

Maintenant pour (A), la méthode sera créé pour chaque instance du composant (peut-être quelque chose à considérer si vous en avez beaucoup). Vous aurez accès à ce (donc à l'état interne du composant) et vous n'aurez rien à passer en paramètre, ce qui peut être pratique si vous n'êtes pas sûr de la quantité de données dont la méthode a besoin. p>

J'espère que vous pourrez tirer une conclusion de cette explication.