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

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 = () => {
  }
}

你说"为什么要在 React 中绑定this 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