两种定义React Component的方式有什么不同? [英] What's different between two ways of defining React Component?

问题描述

有两种方法来定义React组件.

There're 2 ways to define a React component.

第一个如下.

class SomeComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      someState: false
    }
    this._handleOnChangeState = this._handleOnChangeState.bind(this)
  }

  _handleOnChangeState (e) {
    this.setState({ someState: e.target.value })
  }
  ....

}

第二个如下.

class SomeComponent extends React.Component {
  state = {
    someState: false
  }

  _handleOnChangeState = (e) => {
    this.setState({ someState: e.target.value })
  }
  ....

}

这两个代码具有相同的功能，但我想这里有一些不同的东西，例如内存使用情况等等.

These two codes are the same function, but I guess there's some different something like memory usage or etc.

有人可以清楚地说明吗?预先感谢！

Can someone make it clearly? Thanks in advance!

推荐答案

这是ES的新提案(类字段)，位于第3阶段.要运行以这种方式编写的代码，您需要像Babel这样的编译器和适当的插件.

This is a new proposal (class fields) for ES which is in stage 3 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博客帖子是一个很好的来源看看有什么细节.

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

如果您有时间来，这是 reddit帖子阅读讨论风暴，此提案背后的原因是什么:)

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

这里的箭头功能是另外一个故事.您可以使用没有构造函数的实例属性，并将代码与标准函数混合.但是，当您想使用类似this的内容时将不起作用:

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.

这篇关于两种定义React Component的方式有什么不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！