不使用箭头函数将参数传递给 prop 函数

我听说将箭头函数作为 prop 传递并不理想，因为它每次都会创建一个新函数，这会导致性能问题。然而，我并不完全确定如何完全摆脱它们，如下例所示：

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)}}
            />
        )
    }
}

我尝试过改变onPress in Card to be onPress={onCardPress(message)}，但我知道这不起作用，因为我调用该函数而不是将函数对象传递给onPress of TouchableOpacity。删除箭头功能的“正确”方法或最佳实践是什么TouchableOpacity同时仍然能够通过message来自父组件的参数Home?

你可以这样做：

class Card extends Component {
    pressHandler = () => this.props.onCardPress(this.props.message);

    render() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={this.pressHandler.bind(this)}
            />
        );
    } }