Question

在官方示例中，Timer组件使用this.interval

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },

  interval: null,

  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 (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.renderComponent(<Timer />, mountNode);

但为什么不使用this.state.interval？

或者为什么不呢

tick: function(){
   this.secondsElapsed++;
   this.forceUpdate(); 
}

如果我只使用this.myPrivateState，为什么需要this.state.myPrivateState？

Answer 1

更改为state会导致重新呈现该组件。

您可以看到interval生命周期回调中已清除componentWillUnmount。为什么你会在state中设置间隔，如果你需要在组件转到umnount（将被移除）时清除它？

将state放入应该在组件发生变化时触发重新渲染的内容。

forceUpdate方法就在那里，因为有时你可以知道应该再次渲染组件，但是你没有改变状态，所以你必须显式调用forceUpdate方法来告诉React它应该重新渲染组件。

反应this.state误解

1 个答案: