Pourquoi devriez-vous éviter les fonctions de liaison ou de flèche en ligne dans la méthode de rendu de React ?

Éviter les fonctions de liaison ou de flèche en ligne dans la méthode de rendu

Introduction

Fonctions de liaison ou utilisation Les fonctions de flèche en ligne dans la méthode de rendu sont déconseillées dans React car elles peuvent créer des problèmes de performances lors du rendu. Cet article explore des alternatives à cette pratique et fournit des exemples de leur mise en œuvre.

Problèmes liés à la liaison dans le rendu

Lors de la liaison de fonctions ou de l'utilisation de fonctions de flèche en ligne dans le rendu, un nouveau une instance de la fonction est créée à chaque cycle de rendu. Cela peut entraîner une dégradation des performances, en particulier en cas de nouveau rendu fréquent.

Alternatives à la liaison

• Utilisation du constructeur de composants :

  • Liez la fonction dans le constructeur pour réutiliser la même instance lors du rendu.

• Utilisation de la syntaxe de l'initialiseur de propriété :

  • Déclarez la fonction dans le corps de la classe et affectez-la directement à une propriété à l'aide des fonctions fléchées.

Scénario : réussite Paramètres supplémentaires

Considérons le cas de la transmission de paramètres supplémentaires aux gestionnaires d'événements au sein d'une fonction de carte. Par exemple, envisagez de supprimer un élément d'une liste de tâches :

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)

Solution : composant enfant

Pour éviter toute liaison, créez un composant enfant pour le contenu mappé :

Composant Parent :

deleteTodo = (val) => {
    console.log(val)
}
todos.map(el => 
    <MyComponent val={el} onClick={this.deleteTodo}/> 

)

Composant Enfant (MyComponent) :

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

Dans cette approche, le La fonction de gestionnaire d'événements réside dans un composant enfant, offrant de meilleures performances lors du rendu.

Exemple :

Voici un exemple complet illustrant l'approche du composant enfant :

class Parent extends React.Component {
     _deleteTodo = (val) => {
        console.log(val)
    }
    render() {
        var todos = ['a', 'b', 'c'];
        return (
           <div>{todos.map(el => 
             <MyComponent key={el} val={el} onClick={this._deleteTodo}/> 
        
           )}</div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        _deleteTodo = () => {
                     console.log('here');   this.props.onClick(this.props.val);
        }
        render() {
           return <div onClick={this._deleteTodo}> {this.props.val} </div>
        }
    }
    
ReactDOM.render(<Parent/>, document.getElementById('app'));

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!