Question

创建React组件时，我有时会在Web上使用箭头函数语法创建方法，有时没有它。 E.g。

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

VS

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的上下文。因此，请确保使用箭头函数或绑定事件处理程序。

Transpiled

一旦你通过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

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

1 个答案:

Transpiled

要点：