это в методе React Native class

Question

У меня есть этот компонент React Native:

type Props = { image: string, onPress: Function, text: string, title: String };
type States = { loadError: boolean };

export default class ProductRow extends Component<Props, States> {
  state = {
    loadError: false
  };

  changeToDefaultImg() {
    this.setState({ loadError: true });
  }

  render() {
    let img = this.state.loadError ? (
      <SImage source={PLACEHOLDER} style={styles.placeholderImg} />
    ) : (
      <Image
        source={{ uri: this.props.image }}
        indicator={ProgressCircleSnail}
        indicatorProps={{ color: mainDark }}
        onError={() => this.changeToDefaultImg()}
        resizeMode="contain"
        style={styles.image}
        threshold={0}
      />
    );

    return (
      // JSX
    );
  }
}

Вы видите, что я не написал:

constructor(props) { 
  super(props)
  this.changeToDefaultImg = this.changeToDefaultImg.bind(this); 
}

Но я могу использовать эту функцию без ошибок.

Пожалуйста, объясните мне, почему это работает.

Answer 1

Это работает, потому что:

1. Вы инициализированы state как свойство класса , поэтому вам не нужно constructor.
2. Вы вызываете changeToDefaultImg() внутри анонимной функции стрелки , поэтому вам не нужно использовать Function.prototype.bind() для сохранения this.

Прочитайте эту статью для получения дополнительных объяснений.

Answer 2

Есть два способа заставить функцию класса работать.

1. Объявите это как функцию стрелки

Если вы объявите changeToDefaultImg как changeToDefaultImg = () = {...} и передадите его как onError={this.changeToDefaultImg}, он будет работать нормально.

2. Вызов функции внутри функции стрелки

Если вы вызываете его внутри функции стрелки, такой как onError={() => this.changeToDefaultImg()}, она также будет работать нормально.

Как видите, вы делаете второй случай. Если вы не используете функции стрелок, вы получите неправильный код this.

Вы должны заметить, что лучше использовать первый способ, потому что вы не создаете экземпляр функции стрелки на каждом рендере, как во втором способе.

Вам следует взглянуть на какой-нибудь связанный вопрос .