Question

有两种方法可以定义React组件。

第一个如下所示。

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

}

这两个代码是相同的功能，但我想有一些不同的东西，如内存使用等。

有人可以说清楚吗？提前谢谢！

Answer 1

第一个是传统方法，第二个是babel-transform-class-properties插件。在第二种类型中，babel在引擎盖下做同样的事情，因此它是方便的。

Answer 2

这是ES的新提案（类字段），现在位于stage 3。要运行以这种方式编写的代码，您需要一个像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之外，还有一个很好的来源，可以看到详细信息。

如果你有时间阅读讨论风暴，这是一个reddit post这个提案背后的原因是什么：）

这里的箭头功能是另一回事。您可以使用不带构造函数的实例属性，并将代码与标准函数混合使用。但是当你想使用类似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 );
  }

但是，如果我必须编写构造函数有什么意义呢？这就是为什么你在我们定义类的地方看到箭头函数的原因，就像第二个例子一样。由于箭头功能，无需绑定功能。但我认为这与这项新提案没有直接关系。

两种定义React Component的方法有什么不同？

2 个答案: