reactjs - 定义 React 组件的两种方式有什么不同？

Question

有 2 种方法来定义 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 })
  }
  ....

}

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

有人能说清楚吗？提前致谢！

标签： reactjsecmascript-6es6-class

Answer 1

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