在创建 React 组件时，我有时会在网上发现方法是使用箭头函数语法创建的，有时则没有。例如
class Component extends .... {
someFnk = (param) => { ... }
}
对比
class Component extends .... { someFnk(param) { ... } }
哪种方法是更好的做法？箭头函数使this在函数体中使用是安全的，但是我想知道在 React 中什么时候这可能是一个问题（什么时候this可以改变）？
重新表述这个问题：什么时候箭头函数语法可以保护我免于创建错误？
只要在构造函数中绑定类方法，最终的整体输出都是一样的。
以下，一旦编译，以相同的方式运行。
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, setStateor props，因此您将需要正确的this