javascript - 为什么箭头函数可以解决其他需要 .bind 的问题？（SetInverval 调用使用 setState 的函数）

Question

React 文档实现了一个时钟来演示状态和生命周期等概念。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

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

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

我很好奇为什么componentDidMountsetInterval 使用箭头函数。没有它就不行，要么：

实施一：

setInterval(this.tick(), 1000)

通过执行以下操作，通过返回tick而不是调用它：

实施二：

setInterval(this.tick, 1000)

这会引发setState is not a function错误。

之前在stackoverflow上被问过，但接受的答案是错误的，因为它建议编码实现二。

我猜这个错误是由于this. 在 setInterval 内部，没有this.setState，这就是绑定解决它的原因（正如其他答案之一指出的那样）。

但是，我想知道箭头函数如何解决需要绑定的问题。

标签： javascriptreactjs