3

Babel は魔法のように動いているので、何が起こっているのか非常に混乱しています。

この反応コンポーネントの foo と bar の違いは何ですか? そして、いつどれを使うべきですか？

class MyComponent extends Component {
  foo() {
    //...
  }
  bar = () => {
   //... 
  }
}

(私自身の推測では、foo はプロトタイプにあり、bar はコンストラクターにありますか? とにかく、私は何について話しているのかわかりません)

4

4 に答える 4

7

私の推測では、foo はプロトタイプにあり、bar はコンストラクターにあるのでしょうか?

その通りです。

foo() {}

このコンテキストでは、メソッド宣言があり、値がプロトタイプに割り当てられます。と同等です

MyComponent.prototype.foo = function() {};

bar = ... ;

一方、クラス フィールドです。これは、コンストラクターでインスタンスにプロパティを割り当てるための簡略表記です。

constructor() {
  this.bar = ... ;
}

また、アロー関数がどのように機能するかにより、アロー関数でクラス フィールドを使用すると、基本的に「バインドされた」メソッドを作成できます。

アロー関数の詳細:アロー関数と関数宣言/式: それらは同等/交換可能ですか?

そして、いつどれを使うべきですか？

tl;dr は次のとおりです。バインドされた関数が必要な場合は、クラス フィールド + アロー関数を使用します。

バインドされた関数が必要になるのはいつですか? 関数内で特定の値を参照したいが、関数の呼び出し方法thisを制御できない場合。

これは、ほとんどの場合、コンポーネント インスタンスにアクセスする必要があるイベント ハンドラー(つまり、他の関数 / コンポーネントに渡される関数) (呼び出しthis.setStateまたはthis.props/へのアクセスなどthis.state) に当てはまります。

ただし、使用する必要はありません。必要なときにメソッドをバインドすることもできます。ただし、メソッドがイベント ハンドラーとして渡される場合、常に同じ関数オブジェクトが渡されるように、コンストラクターでメソッドを 1 回だけバインドすることが React コンポーネントにとって理想的です。

別の回答で述べたように、これは React とはまったく関係ありません。クラスフィールドは、今年正式に言語に統合される可能性があります。

于 2018-04-27T21:50:17.477 に答える
1

2 番目の例barはアロー関数です。

関数までarrowは、すべてのnew 関数が独自のthis値を定義していました。

たとえばthis、コンストラクターの場合は新しいオブジェクトにすることができます。

function Person(age){
  this.age=age;
  console.log(this);
}
let person=new Person(22);

または、作成された関数が のようにアクセスthisできる場合は、オブジェクトを指すことができます。baseobj.getAge()

let obj={
  getAge:function(){
    console.log(this);
    return 22;
  }
}
console.log(obj.getAge());

arrow関数は独自の を作成せず、実行の値をthis使用するだけです。一方、関数は親スコープを使用します。thisenclosingcontextarrowthis

于 2018-04-27T21:49:11.783 に答える