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

【问题标题】：What's different between two ways of defining React Component?定义 React 组件的两种方式有什么不同？
【发布时间】：2018-11-20 05:17:57
【问题描述】：

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

}

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

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

【问题讨论】：

第二个不是标准的ES。
但确实有效，在很多例子中都能看到。
它之所以有效，是因为您将它与配置为转译阶段 3 提案的转译器一起使用。
除此之外 - 几乎没有什么理由可以让一个人比另一个人“更好”。
我想知道真正的几个原因！

标签： reactjs ecmascript-6 es6-class

【解决方案1】：

这是一个针对 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 属性中并不是那么好，因为它会在每次渲染中创建我们的函数。

在我们的构造函数中很好地绑定的一种方法：

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

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

【讨论】：

我感觉更清楚了。但是我仍然想知道当我使用箭头函数而不是在构造函数中绑定的普通函数时是否有一些缺点。
@Benjamin Yrs，但很少：箭头函数在实例之间重复。在大多数情况下无关紧要，但如果您在页面上有大量重复的组件，那可能会有点问题。
有人说或认为箭头函数可能存在一些性能问题。我不是很有经验，但就像@DaveNewton 解释的那样，可能会出现一些问题，具体取决于您的应用程序。但我喜欢箭头函数和这个新提议。作为一个学习者，到目前为止，性能对我来说并不是一个大问题，代码可读性比现在的性能更重要:)
@DaveNewton 另一个实现也为每个实例创建一个函数。所以从这个角度来看，它确实没有什么不同。
@zerkms 哦，对了，我什至没想到 :( 是在谈论一般情况。我的错。

【解决方案2】：

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

【讨论】：