javascript - React this.state 误解

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 会导致重新渲染组件。

在componentWillUnmount生命周期回调中可以看到interval被清除了。 为什么要在 state 中设置 interval，如果您需要在组件要 umnount(将被删除)时清除它？

将那些在组件发生变化时应该触发重新渲染的东西放入 state。

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