"this"はReactコンポーネントで何を参照していますか？

Question

はthisは、次のコードでに何を指すん：

class Foo extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     bar: "baz", 
    } 
    } 
} 

私はYDKJSを読んで、それはthisは関数自体を参照していないと言うが、Fooの状態を設定する上記のコードではthis.stateではありません？

Answer 1

クラスでは、最終的に特定のインスタンスを作成するための青写真を作成しています。 constructorには、新しいインスタンスの作成時に実行されるコードが含まれています。そのため、クラス内で常にthis（​​を除く）は、作成された特定のインスタンスを参照します。例えば

：

class Rectangle { 
 
    constructor(height, width, name) { 
 
    this.height = height; 
 
    this.width = width; 
 
    this.name = name 
 
    } 
 

 
    calcArea() { 
 
    console.log(this.name) 
 
    return this.height * this.width; 
 
    } 
 
} 
 

 
const square1 = new Rectangle(10, 10, 'square1'); 
 
const square2 = new Rectangle(15, 15, 'square2'); 
 

 
console.log(square1.calcArea()) // square1 100 
 
console.log(square2.calcArea()) // square2 225

あなたが見ることができるように、thisは、一般的なRectangleにいつも使用している特定のインスタンスにだけではなく指します。同じことが反応成分にも当てはまります。

だからあなたの質問

this.state = { 
    bar: "baz", 
} 

がFooの状態を設定されていない答えるために。しかし、それは青写真（クラス）Fooで作成される特定のインスタンスの状態を設定しています。 Reactのコードのある時点では、new Fooが呼び出されるためです。インスタンスの状態を設定します。

Answer 2

"this"は何かへの参照を保持するキーワードです。この場合、これはFooという名前のクラス内で使用されるため、クラス内でキーワード "this"を使用するときはクラス自体を参照します。

Fooを参照する意味で、このキーワードの助けを借りてクラスに属する他のプロパティと関数にアクセスできるようになりました。クラスは青写真のようなものであり、それ自体は存在しません。クラスにアクセスするためのクラス/オブジェクトのインスタンスを作成します。オブジェクト/インスタンスが作成され、クラスのプロパティにアクセスしたい場合は、このキーワードを使用します。

では、オブジェクトの作成は、コンポーネントが呼び出されている場合、その構文

<Foo /> 

以下によって行われる反応します。今、コンストラクタ内のコード

this.state = { 
     bar: "baz", 
    } 

を使用して、我々は同様に他の関数から、このコンポーネントを越えバーキーにアクセスできることを確認しています。以下のようなもの

render(){ 
    console.log(this.state.bar); 
    return (<div>{this.state.bar}</div>) 
} 

希望するものがあります。

Answer 3

私は投票やコメントに十分な担当者がいないので、私はここに私のコメントを追加します。

@vellip答えはほとんど正しいですが、「これは常にクラス内（静的メソッドを除く）は作成された特定のインスタンスを参照しています。"これは完全には正確ではありません。javascriptの" this "は実行コンテキストに依存し、レキシカルスコープだけでなく"クラス内 "であるためです。

Answer 4

提供したサンプルコードでは、Fooは一部のビューの説明（または青写真）に過ぎませんが、青写真の実際のビューやインスタンスではありません。インスタンスがFooの場合、それを実際のビューとしてレンダリングしなければならないときは、<Foo />がjsx内に出現する度に内部ではReact.createElementメソッドを使用してコンポーネントのインスタンスを作成するので、Fooのインスタンスを作成すると、 ：

const fooInstance = React.createElement(Foo)

fooInstanceあなたはそれをログに記録し、それがFoo内thisによって参照される場合は、プレーンjavascriptオブジェクトです。 thisがFooの中にあるのはFooではなく、Fooのインスタンスを参照していることを理解していることを願っています。で発生するたびに生成されます。