J'ai entendu dire que passer une fonction de flèche comme accessoire n'est pas idéal car cela crée à chaque fois une nouvelle fonction qui entraînera des problèmes de performances. Cependant, je ne suis pas tout à fait sûr de savoir comment m'en éloigner complètement, comme le montre l'exemple ci-dessous:
class Home extends Component {
onCardPress = (message) =>{
alert(message)
}
render(){
return(
<View>
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
</View>
)
}
}
class Card extends Component {
render(){
const { onCardPress , message } = this.props;
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={()=>{onCardPress(message)}}
/>
)
}
}
J'ai essayé de changer onPress dans Card pour être onPress = {onCardPress (message)} , mais je sais que cela ne fonctionne pas car j'appelle la fonction plutôt que de passer un objet fonction au onPress de TouchableOpacity . Quelle est la manière «correcte» ou la meilleure pratique pour supprimer la fonction de flèche dans TouchableOpacity tout en étant toujours en mesure de transmettre le paramètre message du composant parent Home code>?
5 Réponses :
Si vous voulez éviter la fonction flèche, vous devez utiliser bind () . Les fonctions fléchées lieront automatiquement "this" .
class Home extends Component {
constructor(props) {
super(props);
this.onCardPress = this.onCardPress.bind(this);
}
onCardPress (message) {
alert(message)
}
render(){
return(
<View>
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
</View>
)
}
}
class Card extends Component {
render(){
const { onCardPress , message } = this.props;
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={onCardPress(message)}
/>
)
}
}
Vous pouvez faire:
class Card extends Component {
pressHandler = () => this.props.onCardPress(this.props.message);
render() {
return (
<TouchableOpacity
activeOpacity={0.8}
onPress={this.pressHandler.bind(this)}
/>
);
} }
Je me demande simplement, est-ce fonctionnellement identique à la version de la fonction flèche, c'est-à-dire en termes de performances, c'est la même chose? Ou est-ce que cela évite les problèmes de performances liés à l'utilisation des fonctions fléchées?
Il y a un petit avantage en ce que vous ne créez pas une nouvelle fonction à chaque fois que le gestionnaire d'événements est déclenché, mais c'est globalement assez négligeable.
Si je comprends bien, le problème consiste à appeler bind à l'intérieur de render , ou à renvoyer le gestionnaire à partir d'un autre lambda, car cela créera une nouvelle fonction à chaque fois . La manière conventionnelle de contourner ce problème est de lier vos fonctions de gestionnaire ailleurs - comme dans le constructeur. Dans votre cas, cela pourrait ressembler à ceci:
constructor(props) {
....
this.onCardPress = this.onCardPress.bind(this);
}
...
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
Étant donné que vous avez déjà répondu à une autre option comme fonction de flèche dans le message ci-dessus.
class Card extends Component {
onClick = () => {
const { onCardPress, message } = this.props;
onCardPress(message);
}
render(){
const { onCardPress , message } = this.props;
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={this.onClick}
/>
)
}
}
Vous n'avez pas besoin de transmettre la prop de message car vous pouvez y accéder n'importe où dans le composant. Fournissez simplement une fonction dans l'accessoire onPress. Et dans cette fonction, accédez simplement à la prop de message du composant.
class Home extends Component {
onCardPress = (message) => {
alert(message)
}
render() {
return (
<View>
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
</View>
)
}
}
class Card extends Component {
onClick = () => {
const { message, onCardPress } = this.props;
onCardPress(message);
};
render() {
return (
<TouchableOpacity
activeOpacity={0.8}
onPress={this.onClick}
/>
)
}
}