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函数。

full code

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 autobinds方法，因为这几乎总是你想要的。有关更多详细信息，请参阅此博客文章：

http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html

带上下文的setInterval回调

1 个答案: