將參數傳遞給prop函數而不使用箭頭函數

Question

我聽說傳遞箭頭函數作為道具並不理想，因為每次都會創建一個新函數，這將導致性能問題。 但是，我不完全確定如何完全脫離它們，如以下示例所示：

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在Card是onPress={onCardPress(message)} ，但我知道這並不工作，因為我調用該函數，而不是通過一個函數對象的onPress的TouchableOpacity 。 在仍然能夠從父組件Home傳遞message參數的同時，在TouchableOpacity刪除箭頭功能的“正確”方法或最佳做法是什么？

Answer 1

如果要避免使用箭頭功能，則必須使用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)}
            />
        )
     }
 }

Answer 2

您可以這樣做：

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

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

Answer 3

據我了解，問題在於調用render內部的bind或從另一個lambda返回處理程序，因為這每次都會創建一個新函數。 解決此問題的常規方法是將處理程序函數綁定到其他位置，例如在構造函數中。 在您的情況下，可能看起來像這樣：

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

...

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

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

Answer 5

您不需要傳遞消息道具，因為您可以在組件中的任何位置訪問它。 只需在onPress屬性中提供功能即可。 在該功能中，只需訪問組件的消息屬性。

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