是否应该使用箭头函数创建类方法

Question

在创建 React 组件时，我有时会在网络上使用箭头函数语法创建方法，有时则不使用箭头函数语法。例如

class Component extends .... {
  someFnk = (param) => { ... }
}

与

class Component extends .... { someFnk(param) { ... } }

哪种方法是更好的实践？箭头函数使得在函数体中使用是安全的this，但是我想知道在 React 中什么时候这可能是一个问题（什么时候this可以改变）？

重新表述一下问题：箭头函数语法什么时候可以保护我免于产生错误？

Answer 1

只要您在构造函数中绑定类方法，最终的整体输出就是相同的。

编译后，以下内容将以相同的方式运行。

class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.handleBla = this.handleBla.bind(this)
  }

  handleBla() {

  }
}

class Foo extends React.Component {

  handleBla = () => {

  }
}

你说“为什么this在 React 中绑定this不会改变”。这实际上并非如此 - 所有事件处理程序都会更改this. 因此，请确保使用箭头函数或绑定事件处理程序。

转译

一旦你通过 babel 转译两者，你就会发现差别很小。箭头函数简单地映射到 _this （还记得 ES6 之前的这项技术吗？）

var Foo = function () {
  function Foo() {
    _classCallCheck(this, Foo);

    this.handleBla = this.handleBla.bind(this);
  }

  _createClass(Foo, [{
    key: "handleBla",
    value: function handleBla() {
      console.log(this);
    }
  }]);

  return Foo;
}();

var Foo = function Foo() {
  var _this = this;

  _classCallCheck(this, Foo2);

  this.handleBla = function () {
    console.log(_this);
  };
};

概括：

它基本上是相同的，但如果您打算将它们与事件一起使用并引用组件，则必须使用绑定上下文（通过箭头函数或绑定）。这非常常见，因为大多数事件处理程序都引用state、setState或props，因此您将需要正确的this