在不使用箭头函数的情况下将参数传递给 prop 函数答案

【问题标题】：Pass parameters to prop function without using an arrow function在不使用箭头函数的情况下将参数传递给 prop 函数
【发布时间】：2019-07-13 16:47:31
【问题描述】：

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

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

我尝试将Card 中的onPress 更改为onPress={onCardPress(message)}，但我知道这不起作用，因为我正在调用函数而不是将函数对象传递给TouchableOpacity 的onPress。删除TouchableOpacity 中的箭头函数同时仍能够从父组件Home 传递message 参数的“正确”方式或最佳实践是什么？

【问题讨论】：

标签： reactjs react-native arrow-functions react-props

【解决方案1】：

你可以这样做：

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

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

【讨论】：

只是想知道，这在功能上是否与箭头功能版本相同，即性能方面是否相同？或者这是否避免了使用箭头函数的性能问题？
有一个小好处，即您不会在每次触发事件处理程序时都创建一个新函数，但总体而言这可以忽略不计。

【解决方案2】：

如果你想避免箭头功能，你必须使用bind()。箭头函数将automatically bind "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)}
            />
        )
     }
 }

【讨论】：

【解决方案3】：

据我了解，问题在于在 render 内部调用 bind，或从另一个 lambda 返回处理程序，因为这每次都会创建一个新函数。解决这个问题的常规方法是将处理程序函数绑定到其他地方——比如在构造函数中。在您的情况下，可能如下所示：

constructor(props) {
    ....
    this.onCardPress = this.onCardPress.bind(this);
}

...

<Card 
   onCardPress={this.onCardPress}
   message="Hello world!"
/>

【讨论】：

【解决方案4】：

鉴于您已在上述帖子中回答了箭头功能的替代选项。

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

【讨论】：

【解决方案5】：

您不需要传递 message 属性，因为您可以在组件中的任何位置访问它。只需在 onPress 道具中提供一个功能。在该函数中，只需访问组件的 message 属性即可。

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

【讨论】：