Передайте параметры в функцию 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.Каков «правильный» способ или лучшая практика для удаления функции стрелки в TouchableOpacity при возможности передачи параметра message из родительского компонента Home?

Answer 1

Вам не нужно передавать сообщение, потому что вы можете получить к нему доступ в любом месте компонента.Просто добавьте функцию в реквизит 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}
      />
    )
  }
}

Answer 2

Учитывая альтернативную опцию, так как функция стрелки уже указана в предыдущем сообщении.

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 3

Вы можете сделать:

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

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

Answer 4

Насколько я понимаю, проблема заключается в вызове bind внутри render или возврате обработчика из еще одной лямбды, поскольку это будет каждый раз создавать новую функцию.Обычный способ обойти эту проблему - привязать ваши функции-обработчики в другом месте - как в конструкторе.В вашем случае это может выглядеть так:

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

...

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

Answer 5

Если вы хотите избежать функции стрелок, вы должны использовать 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)}
            />
        )
     }
 }