如何为Arrow函数编写替代代码

Question

我目前正在尝试在https://en.reactjs.org/docs/state-and-lifecycle.html.代码中有以下带有箭头功能的块。

https://codepen.io/gaearon/pen/zKRqNB?editors=0010

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

作为一个初学者，我对Arrow函数没有什么经验，也不太明白什么时候使用它们是有意义的，所以我想把它写成一个普通函数。所以我更改了我的代码如下：

componentDidMount() {
this.timerID = setInterval (
function() {
this.tick();
},
1000
);
}

但是，代码就不再工作了。有人能帮帮我吗？错误在哪里？

Answer 1

这是因为箭头函数不会更改this，而常规函数会更改。这就是造成差异的原因。以下是一些选项：

componentDidMount() {
const that = this;
this.timerID = setInterval (
function() {
that.tick();
},
1000
);
}

或

componentDidMount() {
this.timerID = setInterval(this.tick, 1000);
}

Answer 2

除了Christian上面提到的之外，您还需要记住异步代码(超时中的代码、单击事件处理程序、API请求后的代码、承诺等(需要绑定到实例的范围。因此，在他给你的第二个例子中，你需要这样做：

class X {
constructor(props) {
super(props);
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.timerID = setInterval(this.tick, 1000);
}
tick() { ... }
}