Javascript 对此作出反应。表示误解

Javascript 对此作出反应。表示误解,javascript,reactjs,Javascript,Reactjs,在官方示例中,计时器组件使用此.interval var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, interval: null, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componen

在官方示例中,计时器组件使用此.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.myPrivateState
为什么需要
this.state.myPrivateState

更改为
状态
会导致组件重新招标

您可以看到,
componentWillUnmount
lifecycle回调中的
interval
被清除。 如果在组件将要umnount(将要删除)时需要清除它,为什么要将interval设置为
状态

当组件发生变化时,将其置于
状态
,这些东西应该会触发组件的重新启动


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

换句话说,当属性不影响渲染时,您可以直接在
上分配属性,但只需要多个生命周期挂钩或事件处理程序就可以使用这些属性。@cevek:看看这个。这是最新版本。它的功能与您的版本完全相同,但使用正确的反应方式。你基本上也是这么做的,但不是正确的方法。@Krab只是“不是正确的方法”?什么是陷阱?@cevek:没有陷阱。反应很简单。它为您提供了一种如何使用getInitialState回调和setState方法维护组件状态的方法,并允许您稍后以this.state的形式访问render方法中的状态。如果通过setState更改状态,React将再次渲染组件。这就是全部。您可以使用forceUpdate和instance属性,因为它具有相同的效果,但为什么???@cevek:您到底不了解什么?
tick: function(){
   this.secondsElapsed++;
   this.forceUpdate(); 
}