javascript - 带上下文的 setInterval 回调

Question

我开始学习 React 框架，但实际上我正在从主站点查看此代码，但仍然无法理解

 tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);

如果我传递this.tick给setInterval，那么当计时器事件在引擎盖下被触发this.tick并被调用时，它可能应该在window对象的上下文中被调用，对吧？如果这是真的，那么tick函数中的代码应该是错误的，因为对象上没有setState函数window。

完整代码

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return React.DOM.div({},
      'Seconds Elapsed: ', this.state.secondsElapsed
    );
  }
});

React.renderComponent(Timer({}), mountNode);

Answer 1

React 自动绑定组件规范中定义的方法，因为这几乎总是你想要的。有关更多详细信息，请参阅此博客文章：React v0.4 中的新功能：默认自动绑定。