Éviter les fonctions de flèche en ligne dans les méthodes de rendu
Il est recommandé d'éviter les fonctions de flèche en ligne telles que this._handleChange.bind(this) dans la méthode de rendu d'un composant React.
Raison :
Lors du nouveau rendu, React créera de nouvelles méthodes au lieu de réutiliser les anciennes. Cela peut nuire aux performances en provoquant une création de fonctions et une allocation de mémoire inutiles.
Alternatives :
Il existe plusieurs façons de contourner les fonctions de flèche de liaison dans la méthode de rendu :
1. Liaison du constructeur :
Exemple :
class MyClass extends React.Component { constructor(props) { super(props); this._handleChange = this._handleChange.bind(this); } _handleChange() { // ... } render() { return <input onChange={this._handleChange} />; } }
2. Syntaxe de l'initialiseur de propriété :
Exemple :
class MyClass extends React.Component { _handleChange = () => { // ... }; render() { return <input onChange={this._handleChange} />; } }
3. Gestion des événements avec les fonctions de rappel :
Exemple :
class MyClass extends React.Component { handleDeleteTodo = (todo) => { // ... }; render() { return todos.map((todo) => ( <div key={todo}> <input onChange={this.handleDeleteTodo.bind(this, todo)}> {todo} </div> )); } }
4. Fonctions de flèche à l'échelle du composant :
Exemple :
class MyClass extends React.Component { _handleDeleteTodo = (todo) => { // ... }; render() { return todos.map((todo) => ( <div key={todo} onClick={this._handleDeleteTodo.bind(this, todo)}> {todo} </div> )); } }
5. Gestionnaires d'événements externes :
Exemple :
const handleDeleteTodo = (todo) => { // ... }; class MyClass extends React.Component { render() { return todos.map((todo) => ( <MyComponent todo={todo} onDelete={handleDeleteTodo} /> )); } } class MyComponent extends React.Component { render() { return <div onClick={this.props.onDelete.bind(this, this.props.todo)}>{this.props.todo}</div>; } }
Ces alternatives offrent des méthodes efficaces pour gérer les événements au sein des composants React sans sacrifier les performances ni introduire de fonctions inutiles. contraignant.
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!