「this」在React組件中引用了什麼？

什麼this請參閱下面的代碼：「this」在React組件中引用了什麼？

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

我讀YDKJS和，它說，this並不是指函數本身，而不是this.state在上面的代碼中設置的Foo狀態？

來源

2017-08-26 Austin Tackaberry

它在這裏指的是類（組件）'Foo'。 –

這是爲什麼？ –

'this'在反應方面沒有區別 - 只是'this' –

使用類正在構建藍圖，以最終創建特定實例。 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但總是到您正在使用的特定實例。 React組件也是如此。

因此，要回答你的問題

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

沒有設定Foo狀態。但它設置了藍圖（類）Foo創建的特定實例的狀態。因爲在React的代碼中某個時候，它會調用new Foo。只有它會設置實例的狀態。

來源

2017-08-26 08:32:16 vellip

「this」是關鍵字，它持有對某個事物的引用，在這種情況下，這是在命名爲Foo的類中使用的，所以當我們在類中使用關鍵字「this」時，它引用類本身。

通過對Foo的引用意味着，現在您可以藉助此關鍵字訪問屬於類的其他屬性和功能。類就像一個藍圖，並不存在，我們創建對象/類的實例來訪問它們。一旦對象/實例被創建，並且我們想要在它們之間訪問類的屬性，我們使用這個關鍵字。

在反應對象的創建是通過下面的語法

<Foo />

即當組件被調用來完成。現在通過使用代碼構造函數

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

我們確保我們可以從任何其他函數跨該組件訪問條形鍵。像下面的東西

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

希望這會有所幫助。

來源

2017-08-26 09:13:45 mindaJalaj

我沒有足夠的代表投票或評論，所以我會在這裏添加我的評論。

@vellip答案大部分是正確的，但是，句子「所以這個類裏面總是（除了靜態方法）指的是創建的特定實例。「並不完全精確，因爲在javascript中，」this「依賴於執行上下文，而不僅僅是詞法範圍，即」在類內「。因此，如果一個類做事件處理，例如」this「可能也是一樣

來源

2017-08-26 16:19:37

在您提供的示例代碼中，Foo僅僅是某個視圖的描述（或藍圖），它不是藍圖的實際視圖或實例。 Foo的實例，當它必須呈現爲實際視圖時，它會在您的jsx中遇到<Foo />。React內部使用React.createElement方法創建其組件的實例，因此要創建Foo的實例，它會在內部執行類似操作：

const fooInstance = React.createElement(Foo)

fooInstance是，如果你登錄它的JavaScript對象一個普通的，它是由this內Foo簡稱。我希望你現在明白Foo裏面的this不會反駁Foo，而是它指的是Foo的實例，當它遇到`你在jsx中時，它會使用React.createElement()來創建。

來源

2017-08-26 16:50:07

「this」在React組件中引用了什麼？

回答

相關問題