web-dev-qa-db-fra.com

React fonctions à l'intérieur de render ()

Y a-t-il une préférence sur l'endroit où vous placez les fonctions à l'intérieur d'un composant React. J'apprends toujours à réagir, alors j'essaie simplement de trouver les meilleures pratiques.

class Content extends React.Component {
    /// Whats the difference between putting functions here such as 
   Hello(){

   }

  render(){
      /// or here
   Hello(){

   }


    return()(
      <div>blah blah </div>

    )

    }


  }
reactjscomponents
17
Whymess

Une fonction dans la méthode de rendu sera créée à chaque rendu, ce qui représente un léger impact sur les performances. C'est aussi compliqué si vous les mettez dans le rendu, ce qui est une raison beaucoup plus importante, vous ne devriez pas avoir à faire défiler le code dans le rendu pour voir la sortie html. Mettez-les toujours à la place.

Pour les composants sans état, il est probablement préférable de garder les fonctions en dehors de la fonction principale et de passer les accessoires à la place, sinon la fonction sera créée à chaque rendu également. Je n'ai pas testé les performances donc je ne sais pas s'il s'agit d'une micro-optimisation mais ça vaut le coup de le noter.

Exemple:

const MyStatelessComponent = ({randomProp}) => (
    render() {
        doSomething(randomProp);

        return <div />
    }
);

doSomething = (randomProp) => {
    //Do something here
}
34
Martin Dawson

Il convient de noter qu'il y a des moments où vous souhaitez effectuer des calculs intensifs dans le rendu () et prendre le coup de performance. Surtout quand il s'agit de faire des calculs à partir d'accessoires. Prenons le cas de

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.firstName + props.lastName,
    };
  }

  render() {
    return <div> {this.state.name} </div>;
  }
}

Désormais, lorsque les accessoires changent, l'état ne sera pas mis à jour car la fonction constructeur ne s'exécute que lorsque le composant est monté. Une meilleure façon serait de faire le calcul en rendu. Ainsi, chaque fois que votre composant se redirige, il recalcule et rend la bonne valeur.

class Person extends React.Component {
  render() {
    const myName = this.props.firstName + this.props.lastName;

    return <div> {myName} </div>;
  }
}

Et cette version est un peu plus propre à lire:

class Person extends React.Component {
  calculateName = () => {
    return this.props.firstName + this.props.lastName;
  }

  render() {
    const myName = this.calculateName();

    return <div> {myName} </div>;
  }
}
3
Gunther