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
  }
}

但是请避免使用普通的类属性并使用第一个示例中的状态属性。所以，你可以：

使用this.setState()。
使用this.forceUpdate()强制更新并重新呈现组件。
重新渲染父组件。
从React的生命周期钩子中更改属性，例如shouldComponentUpdate()
不允许在范围外突变属性，例如。如果您正在使用普通属性，然后您可以从中更改它浏览器控制台。

您可能需要正常属性，例如：

在构造函数

this.timer = setTimeout(..)

在componentWillUnmount中清除计时器

componentWillUnmount (clearTimeout(this.timer))

Answer 2

您可以答案，但不是myField++，而是将其更改为this.myField++。小吃@ here

创建的示例

它与React没什么关系，但更多关于JS中的一般类概念。找出有关课程的more

Answer 3

你可以this.myField++。虽然语法错误，因为你必须从渲染中返回一些内容，如：

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 blog post] [2]是好的   来源看看有什么细节。

如果你有时间阅读讨论，这是[reddit post] [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道具中绑定我们的函数并不是那么好，因为它会   在每个渲染中创建我们的函数。

在构造函数中很好地绑定了一种方法：
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

该语法是语法糖。没什么＆＃34;新＆＃34;关于这方面的JavaScript。它抽象出创建构造函数的概念，其唯一目的是在class的上下文中声明变量并为您完成。这些是等价的：

class Sample {
  dog = 1
}

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

React ES6类中的实例属性

4 个答案: