React ES6类中的实例属性 [英] Instance property in React ES6 class

问题描述

React如何进入状态，您可以定义如下状态：

How come in React you can define state like below:

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

但是为了定义其他实例属性您需要在构造函数或其他函数中执行此操作吗？在这种情况下，您不能执行以下操作：

But in order to define other instance properties you need to do it in the constructor or other functions? As in, you can't do this:

 class Test extends React.Component {
  myField = 0;

  render() {
    myField++
  }
}

推荐答案

您可以执行 this.myField ++ 。虽然语法是错误的，因为您必须从render中返回一些内容，例如：

You can do this.myField++. Though syntax is wrong since you must return something from render like:

class Test extends React.Component {
  myField = 0;

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

您不会看到 1 ，因为React首先看到了myField的值并将其呈现。

You won't see 1 there because React first sees myField's value and render it.

但是我认为实际的问题并不在于我们如何使用它。这是关于ES的新建议：类字段。这是对此的解释： https://stackoverflow.com/a/50789811/7060441

But I think the actual question is not about how we use it. It is about a new proposal for ES: class-fields. Here is an explanation for that: https://stackoverflow.com/a/50789811/7060441

这是ES的新提案（类字段），目前处于[阶段3] [1]
。要运行以这种方式编写的代码，您需要像Babel这样的编译器
和适当的插件。

This is a new proposal (class fields) for ES which is in [stage 3][1] right now. To run a code written in this way you need a transpiler like Babel and an appropriate plugin.

在编译之前：

class A {
  static color = "red";
  counter = 0;

  handleClick = () => {
    this.counter++;
  }
}

转换后（Babel Repl的第二阶段）：

After transpile (with stage 2 on Babel Repl):

class A {
  constructor() {
    this.counter = 0;

    this.handleClick = () => {
      this.counter++;
    };
  }

}
A.color = "red";

除了官方建议[2ality blog post] [2]也是不错的
资料来源，以了解详细信息。

In addition to the official proposal [2ality blog post][2] is a good source to see what are the details.

如果您有时间阅读讨论，则有[reddit帖子] [3]。
风暴是什么原因？这个建议的背后：）

Here is a [reddit post][3] if you have time to read the discussion storm what is the reason behind this proposal :)

这里的箭头功能是一个不同的故事。您可以使用不带构造函数的实例
属性，并将代码与标准
函数混合使用。但是，当您要使用类似的东西时，
不会起作用：

The arrow function here is a different story. You can use instance properties without constructor and mix your code with standard functions. But when you want to use something like that this won't work:

class App extends React.Component {
  state = { bar: "baz"}

  foo() { console.log(this.state.bar) };

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

我们需要以某种方式绑定函数：

We need to bind our function in somehow like:

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

但是，在JSX prop中绑定我们的函数并不是很好，因为它将创建

But, binding our function in a JSX prop is no so good since it will create our function in each render.

将其很好地绑定到构造函数中的一种方法：

One way to do this nicely bind in our constructor:

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

但是，如果我必须写一个构造函数，那有什么意义呢？这就是为什么
到处都可以看到箭头功能的地方，我们在第二个示例中定义了
之类的类。借助箭头
函数，无需绑定到函数。但这与我认为的这项新建议没有直接关系。

But, if I have to write a constructor what is the point? This is why you see arrow functions everywhere where we define the classes like your second example. No need to bind to function thanks to arrow functions. But it is not directly related to this new proposal I think.

[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/

[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/

这篇关于React ES6类中的实例属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！