Reactイベントバインディングの詳細な説明

1. 何ですか

reactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえば、 onclick onClickと書き直す必要があります。

最も単純なイベントバインディングは次のとおりです。

クラスShowAlertはReact.Componentを拡張します。
  アラートを表示（）{
    console.log("こんにちは");
  }

  与える（） {
    <button onClick={this.showAlert}>表示</button> を返します。
  }
}

上記のように、イベントバインディングメソッドは{}でラップする必要があります。

上記のコードは問題ないように見えますが、処理関数の出力コードをconsole.log(this)に置き換えると、ボタンがクリックされたときにコンソール出力がundefined

2. バインド方法

thisの正しく出力する問題を解決するために、一般的なバインディング方法は次のとおりです。

レンダリングメソッドでbindを使用する
レンダリングメソッドで矢印関数を使用する
コンストラクタでバインドする
定義フェーズで矢印関数バインディングを使用する

レンダリングメソッドでbindを使用する

クラスコンポーネントを使用し、コンポーネント/要素にonClick属性を指定すると、そのthisが現在のコンポーネントに自動的にバインドされるようになりました。この問題の解決策は、イベント関数の後に.bind(this)を使用して、 this現在のコンポーネントにバインドすることです。

クラスAppはReact.Componentを拡張します。
  ハンドルクリック() {
    console.log('これ > ', これ);
  }
  与える（） {
    戻る （
      <div onClick={this.handleClick.bind(this)}>テスト</div>
    ）
  }
}

このメソッドは、 renderたびにコンポーネントを再bindため、パフォーマンスに影響します。

レンダリングメソッドで矢印関数を使用する

ES6コンテキストは、 thisのポインターを現在のコンポーネントにバインドするために使用されます。また、 renderが実行されるたびに新しいメソッドが生成され、パフォーマンスに影響します。

クラスAppはReact.Componentを拡張します。
  ハンドルクリック() {
    console.log('これ > ', これ);
  }
  与える（） {
    戻る （
      <div onClick={e => this.handleClick(e)}>テスト</div>
    ）
  }
}

コンストラクタでバインドする

render操作で繰り返しバインドされないように、 constructorで現在のコンポーネントを事前にbind 。

クラスAppはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.handleClick = this.handleClick.bind(this);
  }
  ハンドルクリック() {
    console.log('これ > ', これ);
  }
  与える（） {
    戻る （
      <div onClick={this.handleClick}>テスト</div>
    ）
  }
}

定義フェーズで矢印関数バインディングを使用する

上記の方法 3 と同様に、 render操作での繰り返しバインディングを回避でき、実装も次のように非常に簡単です。

クラスAppはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
  }
  ハンドルクリック = () => {
    console.log('これ > ', これ);
  }
  与える（） {
    戻る （
      <div onClick={this.handleClick}>テスト</div>
    ）
  }
}

3. 違い

上記の 4 つの方法の違いは主に次のとおりです。

書き方：方法1と方法2は書きやすいが、方法3は複雑すぎる
パフォーマンス: 方法 1 と方法 2 では、コンポーネントがレンダリングされるたびに新しいメソッドインスタンスが生成されるため、パフォーマンスが低下します。この関数がプロパティ値として子コンポーネントに渡されると、追加のレンダリングが発生します。方法3と方法4は1つのメソッドインスタンスのみを生成します。

上記を踏まえると、方法4が最適なイベントバインディング方法である。

React イベントバインディングに関するこの記事はこれで終わりです。React イベントバインディングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: