web-dev-qa-db-ja.com

Reactで矢印関数をバインドする必要がないのはなぜですか？

関数をReactでバインドして機能させる必要があることは誰もが知っています。なぜ、関数をバインドする必要があるのか​​はわかります。

しかし、なぜ矢印関数をバインドする必要がないのかわかりません。

例：矢印関数の使用（バインドは不要）

_handleClick = () => {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });
_

};

さて、関数を使う（バインドが必要です）

this.handleClick = this.handleClick.bind(this);

_handleClick() {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });
_

};

関数にバインドが必要な理由は問いません。矢印関数でバインディングが不要な理由を知りたいだけです。

ありがとう。

reactjsarrow-functions
7
prabin badyakar

矢印関数のコンテキストに次のものがないという理由だけで：

  • この
  • 引数
  • 素晴らしい
  • new.target

したがって、矢印関数内でこれを参照すると、thisを他の変数として扱い、最初にスコープ内で宣言を探しますが、見つからないため、上位スコープを検索します。 thisは、必要な反応コンポーネントクラスを参照しているため、thisをクラスにバインドする必要はありません。

7
Tarek Essam

引用するには [〜＃〜] mdn [〜＃〜] ：

矢印関数式の構文は関数式よりも短く、独自のthis、arguments、super、またはnew.targetはありません。これらの関数式は、メソッド以外の関数に最適であり、コンストラクターとして使用することはできません。

さらに、

矢印関数が機能するまで、すべての新しい関数は独自のthis値を定義しました（関数の呼び出し方法に基づいて、コンストラクターの場合は新しいオブジェクト、厳密モードの関数呼び出しでは未定義、関数が呼び出された場合は基本オブジェクト「オブジェクトメソッド」などとして）。これは、オブジェクト指向スタイルのプログラミングでは理想的とは言えません。

したがって、基本的に、バインドする必要がない理由は、thisがarrow関数のコンテキストに存在しないためです。したがって、次のレベルに進み、そこで見つかったthisを使用します。

5
Michael McQuade