React ES6類中的實例屬性

Question

如何在React中定義如下狀態：

class Test extends React.Component {
  state = { foo: 'bar' }
}

但是，要定義其他實例屬性，您需要在構造函數或其他函數中執行此操作嗎？ 在這種情況下，您不能執行以下操作：

 class Test extends React.Component {
  myField = 0;

  render() {
    myField++
  }
}

Answer 1

你可以這樣做：

class Test extends React.Component {
  myField = 0;

  render() {
    this.myField++ // use this to access class properties
  }
}

---

但是，避免像第一個示例那樣使用普通的類屬性並使用狀態屬性。 因此，您可以：

1. 必要時使用this.setState()重新渲染組件。
2. 使用this.forceUpdate()強制更新並重新呈現組件。
3. 重新渲染父組件。

4. 從React的生命周期掛鈎更改屬性，例如shouldComponentUpdate()

5. 不允許從范圍之外對屬性進行突變，例如。 如果您使用的是常規屬性，則可以從瀏覽器控制台進行更改。

---

您可能需要正常的屬性，例如以下情況：

將計時器設置為構造函數中的常規類屬性

this.timer = setTimeout(..)

清除componentWillUnmount中的計時器

componentWillUnmount (clearTimeout(this.timer))

Answer 2

答案是可以的，但是可以將其更改為this.myField++而不是myField++ this.myField++ 。 一個在小吃@ 這里創建的示例

實際上，它與React並沒有多大關系，而更多涉及JS中的通用類概念。 了解有關課程的更多信息

Answer 3

您可以執行this.myField++ 。 雖然語法是錯誤的，因為您必須從render返回一些內容，例如：

class Test extends React.Component {
  myField = 0;

  render() {
    return <div>this.myField++</div>
  }
}

您不會在那里看到1 ，因為React首先看到myField的值並將其呈現。

但是我認為實際問題不在於我們如何使用它。 這是關於ES的新建議：類字段。 這是對此的解釋： https : //stackoverflow.com/a/50789811/7060441

這是ES的新提案（類字段），目前處於[階段3] [1]。 要運行以這種方式編寫的代碼，您需要像Babel這樣的編譯器和相應的插件。

轉換前：

 class A { static color = "red"; counter = 0; handleClick = () => { this.counter++; } } 

轉運后（Babel Repl的階段2）：

 class A { constructor() { this.counter = 0; this.handleClick = () => { this.counter++; }; } } A.color = "red"; 

除了官方建議之外，[2ality博客文章] [2]是查看詳細信息的好資源。

如果您有時間閱讀討論風暴，那么這是一個[reddit帖子] [3]，該提案背后的原因是什么：）

這里的箭頭功能是另外一個故事。 您可以使用沒有構造函數的實例屬性，並將代碼與標准函數混合。 但是，當你想使用類似的東西， this是行不通的：

 class App extends React.Component { state = { bar: "baz"} foo() { console.log(this.state.bar) }; render() { return <div><button onClick={this.foo}>Click</button></div>; } } 

我們需要以某種方式綁定我們的功能：

 return <div><button onClick={this.foo.bind(this)}>Click</button></div> 

但是，將函數綁定到JSX prop中並不是很好，因為它將在每個渲染器中創建函數。

一種很好地綁定到我們的構造函數中的方法：

 constructor(props) { super(props); this.foo = this.foo.bind( this ); } 

但是，如果我必須寫一個構造函數，那有什么意義呢？ 這就是為什么在我們定義類的地方到處都可以看到箭頭功能的原因，就像您的第二個示例一樣。 借助箭頭功能，無需綁定功能。 但是，我認為這與這項新建議沒有直接關系。

[1]： https ： //github.com/tc39/proposal-class-fields [2]： http ： //2ality.com/2017/07/class-fields.html [3]： https：// www。 reddit.com/r/javascript/comments/6q0rov/es_proposal_class_fields/

Answer 4

該語法是語法糖。 在這方面，關於JavaScript並沒有什么“新鮮”的東西。 它抽象出了創建構造函數的概念，其唯一目的是在class的上下文中聲明變量並為您完成。 這些是等效的：

class Sample {
  dog = 1
}

class Sample {
  constructor() {
    this.dog = 1
  }
}